Как правильно верстать адаптивно?

Question

[Lexshpin]

Сверстал свой первый "сложный" веб-сайт и адаптировал его. Проблема в том, что при адаптации в консоли разработчика сайт выглядит нормально, потом обновляешь страницу - и уже нет. Правишь. Потом снова обновляешь, опять все поехало. Так и танцевал с бубном, пока все не стало выглядеть ок на всех разрешениях. Открыл сайт на iPhone XR и на широком экране (сам верстал на 13") - все поехало. Делал я это долго и мучительно.
Вопрос: как делать адаптивную верстку быстро, безболезненно и так, чтобы я был уверен, что все будет выглядеть ок на всех расширениях?

Приложил код media.scss

Comments

[Одиночка Айс]

2560 - для кого и зачем? максимум 1920, все, что больше - отображает сайт по центру.

Answer 1

[Aetae]

Чтобы верстать адаптивно - в первую очередь надо верстать адаптивно.
Размеры все должны быть по максимуму относительными.
Флексы, гриды, проценты, vh, vw, em.
Медиа-запросы же нужно использовать только тогда, когда нужно поменять структуру кардинально, а не для подгонки пикселей.

Answer 2

[Sergey Dolya]

Нельзя верстать на фактических еденицах. Перейди на относительные. А медиа запросы это хорошо. И много их не бывает. Хоть через 1 пиксель.

Answer 3

[M-RESULT]

А смысл городить огород из множества разрешений? Я далеко не фанат bootstrap, но беру его брейкпоинты за ориентир, и потом верстаю как душе угодно. В итоге всегда получается адекватная вёрстка с правильным отображением на всех устройствах. По мне так здесь просто усложнил себе жизнь))

Ну и плюс, соглашусь с комментарием выше, что нужно всё продумывать на этапе дизайна.

Answer 4

[Михаил]

Получается ты верстаешь чуть ли не под каждую модель телефона и монитора. Зачем?
верстка делается под варианты: смартфоны, планшеты, мониторы, fullscreen. Делаешь контейнер, который будет иметь одинаковые размеры, например если у тебя экран 1000 или 1200, сам контейнер всегда 960 (просто грубый пример) а по краям отступы, т.е. берется размеры "от и до" и делается контейнер по минимальному размеру данного диапазона

Comments

[Одиночка Айс]

Вариант для ленивых))

[Михаил]

Одиночка Айс, тут не в лени дело, а в объеме написанного
результат:
быстро написанный код
компактный код
меньше объема передаваемых данных
себестоимость кода в разы дешевле

ведь свойства в любом случае будут передаваться. Вот сделал например под 50 экранов, и зачем передавать все свойства на один маленький экранчик? а так всего 4 вида, а результат тот же

[Одиночка Айс]

Михаил, вопрос не в том, чтобы верстать под 50 экранов, а в том, чтобы верстать адаптивно, т.е. при изменении ширины экрана подстраивать верстку. вариант с 4 видами хорош, но показывать на 1400 вариант для 1024, ну, такое. Или для 768 показывать как 360.

[Михаил]

Одиночка Айс, тут еще зависит от дизайна, какие-то блоки растягиваются на 100% какие то фиксируется по ширине контейнера, какие-то скрываются или появляются при определенной ширине, в итоге будет все адаптивно, но это куда лучше чем делать различия например для 320,375,414 (эмуляция айфонов в хроме, как пример)
большинство сайтов и делают контейнерами, других вариантов я даже и не видел за последние несколько лет)

[Alex_2]

Изначально надо продумать дизайн в ФШ или в чем там сейчас модно. Продумать как все это будит состоять из блоков и как они должны себя вести при изменении ширины окна. И уж только потом браться за вёрстку.

Answer 5

[FimaUA]

Насколько я понял, вы адаптирует сайт в консоли разработчиков, то есть в браузере, и после внесения изменений, при обновлении страницы, вы теряете все внесённые изменения. Если это так, то знайте, что консоль разработчиков это не редактор, она не сохраняет изменения, которые вы в ней проводите. Вам нужно внести свои правки непосредственно в файл сайта, css или html.