Адаптивная вёрстка — как побороть боль?

Всем привет!

Когда появился принцип адаптивной вёрстки для меня это оказалось кошмаром, от которого я до сих не могу оправиться, это такая боль - ведь под каждое разрешение практически нужно перевёрстывать макет, писать новый код, получается много кода, который труднее обслуживать. Будем понимать эту боль под названием "энтропия кода"

Недавно мне дали сверстать макет мобильного приложения и я решил наконец попробовать побороть эту боль, сделать красиво и лаконично - использовать rem. Это показалось мне самым простым решением, 100% мобильных браузеров поддерживают эту единицу. Суть в том, что мы пишем несколько строк media queries для тега html, указывая лишь базовые размеры шрифтов в пикселях, пропорционально тому, как должен выглядеть у нас макет в разных разрешениях, а остальную вёрстку без media queries верстаем как обычно, только вместо пикселей используем rem. Данная методика легко масштабируется и подгоняет макет в зависимости от базового размера шрифта.
Минимизация кода и лёгкость адаптивной вёрстки таким способом просто колоссальна!

Был единственный минус такого способа: нужно было вести постоянный пересчёт пикселей psd макета в rem, но я быстро решил эту проблему - написал специальную функцию и верстал как раньше в пикселях, препроцессор сам переводил в rem.

Но! Основной прикол в том, что я верстал такой методикой адаптивное мобильное приложение, где дизайн был одинаковый.

Когда я вернулся к адаптивке для обычных сайтов - боль ко мне вернулась ещё с больше силой, чем прежде, ведь как правило мы имеем от 3-х до 6 разных дизайнов:
1) Десктоп большой 1600-1920 пикселей
2) Десктоп маленький/ноутбук ~1100-1400 пикселей
3) Старый моник / планшет - 768-1024 пикселей
4) Недопланшет/ смартфон-переросток ~600 пикселей
5) Смартфон 300-480
6) Старый смартфон 250 пикселей.

Я конечно преувеличил, но как минимум три вёрстки делать нужно это точно.

Так вот вопрос №1 и самый главный: как минимизировать адаптивную вёрстку и сделать код красивым? Как уменьшить т.н. энтропию кода? Существует ли какой-нибудь клёвый подход/методика?

Посмотрел разные сайты крутых веб студий, в целях найти ответ там и увидел что все верстают как попало, то есть вообще не заморачиваясь.
Единственное, видел что некоторые зачем-то используют em и проценты для шрифтов вместо привычных пикселей. Вроде как для масштабирования текста, хотя непонятно как это уменьшает код для адаптивки, по моему только всё усложняет - нужно вести расчёты в зависимости от размера шрифта родительского блока и даже препроцессоры скорей всего не помогут... Незнаю зачем нужно париться задавая размеры шрифтов em единицами, заморочки с rem ещё куда не шло... Может я плохой верстальщик... Кстати особо упоротые из тех сайтов использовали em для margin и прочих box-size свойств...
Вопрос №2:
В чём смысл использовать em?

И cразу вопрос №3:
Неужели нет единой методики, неужели в вёрстке всё так плохо, что каждый как хочет так и д....чит? Или я видел неудачные примеры (хотя искал среди топовых тем themeforest и сайтов топовых веб студий)?


Спасибо!
  • Вопрос задан
  • 22891 просмотр
Решения вопроса 4
Antonoff
@Antonoff
Разработчик
Foundation/Bootstrap + SASS/LESS и никакой боли нет, одно удовольствие верстать адаптивные сайты.
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
сделать красиво и лаконично - использовать rem.

rem не панацея от всех болезней. Вообще каждый юнит надо использовать осмысленно. Будь то px, rem, em или vm/vh/vmin. Все юниты нужны для своих целей и использовать только что-то одно глупо.

Существует ли какой-нибудь клёвый подход/методика?

mobile first. В целом же все зависит сильно от дизайна. Как по мне придумывать какие-то правила на эту тему - глупо.

В чём смысл использовать em?

А вы как думаете, зачем нужны относительные единицы измерений? Обычно их в контексте конкретных блоков используют. Например кнопки. вы выставляете размер шрифта у блока, а все что ниже подстраивается под этот размер.

Неужели нет единой методики, неужели в вёрстке всё так плохо

Единой методики быть не может априори. И не все так плохо. Ну а что до неудачных примеров - просто смеритесь что большинство просто не парится, работает и ладно. Методологии есть - SMACSS, BEM, etc... они не по адаптивной верстке, они просто по верстке. С тем же BEM (возможно слегка адаптированным под ваши нужды) можно изрядно уменьшить количество боли.
Ответ написан
@Elmechador
Настоятельно рекомендую изучить сеточный фреймворк Susy, он как раз и позволяет избавиться от болезней бутстрапа/фондейшен с их определенными сетками , и генерировать нужную сетку под макет.
Ответ написан
almac
@almac
используйте методологию верстки MCSS (основана на принципах БЭМ): верстка разбивается на модули, где все лаконично
Ответ написан
Пригласить эксперта
Ответы на вопрос 12
@c030f5da
Не хочу быть КЭПом, но все проблемы в вёрстке начинаются с дизайна. Адаптивная вёрстка может быть только у адаптивного дизайна, иначе это уже три макета, а не адаптивность. При хорошем подходе к дизайну, верстать по сути приходится только мобильную версию - остальные разворачиваются из оной чутьли не автоматически.
Ответ написан
@sitev_ru
sitev.ru - мой блог ...
Я больше ориентируюсь на back-end, иногда пишу на javascript/jquery, но когда дело касается вёрстки - начинается ступор.

И тут я нашёл для себя Bootstrap. Ступор прошёл ...

Если не хватает стандартных компонентов - можно найти в интернете более продвинутые.
Ответ написан
By_Engine
@By_Engine
Использую пиксели и не парюсь.
Стиль условно делю на несколько частей (в зависимости от экранов)
Первая (вверху) часть самая главная. Она устанавливает все стили для сайта
Вторая часть для планшетов (например) в помощью медиа перегружает только те свойства, которые нужно изменить. Повторение кода минимально
Ответ написан
gulp+slim+sass
как кодо редактор и резальщик псд - brackets with extract
Ответ написан
@mc_julik
bootstrap решает многие проблемы адаптивной верстки, но рекомендую вам для телефонов или старых планшетов просто уменьшать кол-во блоков и упрощать структуру, то есть лого, меню, список материалов и футтер, грубо говоря без всяких плюшек, вот вам и мобильная, над которой париться не надо
Иначе вы никогда не закончите верстать сайт
Ответ написан
@MrCheater
Full-Stack JS. В прошлом программист-олимпиадник
А что pt никто не юзает?
Ответ написан
@anserone
очень понравилось использовать vw. сначала подогнал шрифт, отступы, размеры картинок через perfectPixel Chrome. и вроде все ок на могильниках, а для планшетов и так далее уже через медиа переписываю значения на привычные мне px
Ответ написан
silksofthesoul
@silksofthesoul
Дизайнер
Думаю стоит начать с дизайна адаптивного и с верстки(и дизайна) базовых элементов(написать стили) потом из этого как из конструктора сверстать продукт. Конечноже с помощью ещё какого-нибудь less. Таким образом можно делать весьма сложные и гибкие вещи.
Ответ написан
@serzhei
Верстка, программирование
неудачное у тебя первое впечатление об адаптивной верстке, мне нравится адаптировать хоть от 2300 до 320 px по ширине и не жгутся нервы
Ответ написан
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Методология, которая снимает боль, называется «Mobile First». Bootstrap ее тоже использует.

Суть кратко: мобильный макет обычно выглядит проще всего, там одна колонка, минимум декора → верстаем его в первую очередь. В css на этом этапе появятся стили для текста, фоны, цвета, какие-то базовые отступы.
На более крупных экранах макет усложняется, появляются колонки и т.д. При помощи media queries к мобильной версии дописываем layout-стили, переопределяем уже написанные стили, если нужно (например, размер шрифта увеличился). Базовые стили наследуются из уже написанного кода.
И так для каждого компонента, начиная от маленького экрана заканчивая самым большим, «уточняем» верстку пока не будет все как на дизайне.

Делал когда-то кодкаст по такой методологии cssdeck.com/labs/adaptive-tabs
Нажмите кнопку «play» чтобы посмотреть процесс написания кода.

Если кода не видно, зайдите в режиме инкогнито (без адблока).
Ответ написан
@onlinebd_ru
Я для больших разрешений использую файлы для bootstrap 4, 1600px (HD+), 1920px (Full HD), 2560px (Retina 1440p), 2880px (15" Retina), 3840px (UHD), 4096px (4K), 8192px (8K).
Файлы в свободном доступе Bootstrap 4 Grid для больших разрешений экранов
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы