Адаптивная верстка. Шпаргалки верстальщика

Есть два главных заблуждения о том, что такое адаптивная верстка сайта. Одни думают, что это просто уменьшенное отображение сайта, при котором элементы сжимаются. Другие настойчиво ставят знак равенства между адаптивным дизайном и мобильной версией сайта. В этой статье мы расставим все точки над i и расскажем, как же оно на самом деле.

Что такое адаптивная верстка

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

Проще говоря, адаптивность — это динамическое складывание блоков, а не уменьшенная версия сайта.

Неважно, с какого устройства пользователь зайдет сайт: с компьютера, планшета или телефона — пользоваться им будет одинаково удобно, и необходимый функционал сохранится в полном объеме.

Зачем нужна адаптивная верстка

Сегодня уже не нужно искать исследования и статистику, чтобы доказать, как часто выходят в Интернет с планшетов и мобильных телефонов. Эта реальность окружает нас повсюду: в общественном транспорте, в кафе, в очередях — люди охотно заполняют время серфингом в Интернете, да и вы сами знаете, насколько это удобно. Чтобы выбрать и заказать пиццу, никто не поедет сначала домой добраться до компьютера, а быстренько зайдет на сайт с телефона, попутно делая другие дела. Когда приходит идея о покупке, проще всего сразу же выйти в сеть, сравнить предложения магазинов-конкурентов и, не откладывая в долгий ящик, оформить заказ товара. И таких примеров можно привести бесчисленное множество!

Адаптивность — одно из важных и обязательных условий для современного сайта.
Если сайт корерктно отображается только с компьютера, то при просмотре с планшета или телефона на нем тяжело ориентироваться, блоки не масштабируются, тяжело попасть пальцем на нужную ссылку — в итоге пользователь раздражается, не может совершить целевое действие, теряет время на попытки разобраться в кривом отображении и уходит с ресурса. А потом уже больше не возвращается на него. И уходит к конкурентам.

Именно поэтому решение заказать адаптивный сайт — не прихоть, а условие, которое напрямую влияет на уровень продаж.

Как работает адаптивный сайт

Неадаптивный сайт узнать легко — при просмотре с планшета или телефона вы увидите только часть области, вам придется двигать видимую область влево-вправо, приближать, чтобы шрифт стал читабельным, и отдалять, чтобы найти нужный раздел или форму заявки.

Сайт, имеющий адаптивную верстку, подстраивается под устройство, в зависимости от ширины его экрана. Все элементы на странице адаптируются: меняются их размеры, появляется/исчезает часть вспомогательного контента и декоративных элементов. При этом блоки перестраиваются так, чтобы пользователю было удобно — на значимой информации делается акцент, а второстепенные данные убирают или сворачивают.

Как правило, чем меньше ширина экрана — тем концентрированнее подача информации и тем меньше блоков задействовано. При этом пользователю нет необходимости изменять масштаб: всё просто и понятно даже на небольшом экране.

Еще одна особенность адаптивных сайтов: укрупнение значимых элементов так, чтобы пользователь легко мог попасть пальцем на кнопку на экране или перейти по ссылке. От этого напрямую зависит конверсия сайта, поэтому адаптивный дизайн важно делать user friendly.

Важные факты, которые нужно знать об адаптивных сайтах

1. Адаптивный сайт и мобильная версия — это не одно и то же .

Когда мы говорим про адаптивный сайт, то мы имеем в виду, что это один сайт для разных устройств. В этом его ключевое отличие от мобильной версии сайта. Мобильная версия — это отдельный полноценный сайт, у которого свой функционал, своя верстка и зачастую свой контент. Мобильная версия разрабатывается с учетом удобства пользователей, выходящих на сайт с мобильных устройств: что из десктопной версии им очень важно, а что — избыточно и легко может быть удалено.

2. Функционал на всех устройствах один и тот же .

Здесь всё ясно: так как сайт один, то и возможности его одинаковы, независимо от того, с какого устройства пользователи заходят на сайт.

3. У адаптивного дизайна есть ограничения .

Связаны они в первую очередь с сохранением оригинальной структуры контента при изменении размеров экрана. Зачастую в адаптивной версии мы отказываемся от слайдера и больших фоновых изображений, которые есть в десктопной версии, и не используем Flash. Обычно мы рекомендуем оптимальный вариант.

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

4. Адаптивность может быть полной и частичной .

Полная адаптивность — от мобильных устройств до десктопов, частичная — например, от планшета или ноутбука до десктопа. При разработке адаптивного дизайна обычно делается упор на конкретные устройства, с которых у клиента генерируется больше всего трафика.

5. Не все сайты выигрывают от полностью адаптивного дизайна.

Сайтам со сложным функционалом и/или контентом, требующим достаточного количества экранного пространства для восприятия, полная адаптивность чаще идет во вред. Лучше выделить перечень устройств, на которых функционал будет полным, и сделать для них версию с частичной адаптивностью, а для остальных сделать мобильную версию с урезанным функционалом и возможностью перейти на полноэкранную версию.

6. За идентичность отображения в разных браузерах отвечает кроссбраузерность .

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

Что нужно знать, если вы хотите заказать адаптивную верстку

Компания «Технологии успеха» оказывает услуги по созданию адаптивной верстки сайта. Лучше предусмотреть адаптивный дизайн еще на этапе разработки основного сайта и прописать это в ТЗ. Но если вы придете к нам с готовым дизайном в формате.psd, мы тоже сможем помочь вам. За верстку макетов, сделанных в CorelDraw, мы не беремся — в таком случае мы предлагаем клиентам сначала подготовить дизайн и только потом верстку.

Не зная особенностей сайта и ТЗ, невозможно сориентировать по срокам вёрстки.

Обычно верстка адаптивного корпоративного сайта занимает в среднем 15 дней, срок верстки адаптивного интернет-магазина напрямую зависит от сложности сайта.

Мы никогда не передаем верстку на следующий этап — программирование — пока клиент не проверил адаптивность сайта и корректность работы всех его элементов согласно ТЗ.

Остались вопросы: или мобильную версию? Звоните по бесплатному номеру 8 800 775-17-11 или оставьте свой номер, и мы вам перезвоним и все расскажем.

Адаптивная верстка сайта - уроки для начинающих . Все чаще читатели блога Вебсовет задают в своих письмах вопросы по адаптивной верстке сайта. Окей! Раз есть вопросы, то вэлкам! Этим постом я открываю новую рубрику на блоге, посвященную исключительно адаптивной верстке сайтов.

Для тех, кто не в танке и впервые слышит об этой новомодной (с 2012 года) фишке, краткое пояснение:

Адаптивная верстка предназначена для автоматической подгонки сайта под различные размеры экранов отображающих устройств: настольных ПК, телевизоров, планшетов, смартфонов и прочих мобильников.

Здесь следует дать одно очень важное разъяснение касательно различных похожих определений в современном веб-дизайне, а именно: адаптивный (adaptive) и отзывчивый (responsive) веб-дизайн . Очень многие ошибочно полагают, что это одно и то же. Но это не так.

Адаптивный (adaptive) vs отзывчивый (responsive)

Во-первых, необходимо различать адаптивный веб-дизайн (adaptive web design) и адаптивную верстку (adaptive layout) . Это совершенно разные понятия. Адаптивный веб-дизайн - это глобальный подход к проектированию сайта, тогда как адаптивная верстка - всего лишь частный случай способа верстки для отзывчивого (responsive) веб-дизайна .

Адаптивный и отзывчивый веб-дизайн отличаются как день и ночь. Более того, можно смело утверждать, что отзывчивый веб-дизайн - это малая часть (хотя и вполне самодостаточная) адаптивного веб-дизайна.

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

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

Рассусоливать на эту тему больше нет смысла. Достаточно сказать, что на сегодняшний день все-таки большим спросом пользуется именно отзывчивый веб-дизайн, но с адаптивной версткой:) Надеюсь, после такого краткого экскурса вы теперь не будете путаться в понятиях. Для тех, кто хочет более подробно ознакомиться с данной темой, могу посоветовать почитать и .

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

Преимущества адаптивной верстки

Адаптивная верстка сайта имеет в своем арсенале два главных оружия:

1. Все элементы верстки являются «резиновыми» (flexible) - их размеры зависят от размера экрана отображающего устройства.

2. Медиа-запросы (Media Queries) - отдельная часть файла стилей, задающая различные стили в зависимости от размеров экранов отображающих устройств и их расположения в пространстве (portrait или landscape).

Что касается «резиновости», то эта плюшка задается старым добрым способом:

Кроме того, чтобы сайт не размазывался на слишком больших мониторах, в файле стилей прописывается следующее правило:

#content {
max-width: 1200px;
}

Это если вы не хотите, чтобы ширина сайта превышала 1200 пикселей (на ваше усмотрение). В этом есть определенный сенс. Дело в том, что комфортная ширина читаемого текста не более 10 – 12 слов в строке. Если статья будет растягиваться (например, при просмотре сайта на телевизоре) от края до края, то читать такой текст будет весьма затруднительно.

В адаптивной верстке правилом считается не только применение резиновости для крупных блоков, но и для медийного содержимого: картинок, видео-вставок и пр. Это также легко задается в стилях:

img, embed, video {
max-width: 100%;
}

При уменьшении окна браузера все картинки, видео и прочие элементы будут пропорционально уменьшаться, не вылезая за края родительского блока.

А вот о медиа-запросах мы поговорим подробно в следующий раз. Оставайтесь на связи!

Адаптивная верстка сайтов | Введение

Для тех кто еще не слышал о таком термине как адаптивная верстка могу сказать что такую верстку можно назвать человеческим языком послушной. Этот вид верстки подстраивается под все возможные экраны устройств с которых пришел ваш посетитель, а в последнее время их мягко говоря полно (нетбуки, планшеты, iphone, устройства на основе Android …). У всех этих устройств есть особенность, они работают с разными экранами, но некоторые и них даже перестраивают отдельные элементы, так например iphone очень не кстати, вашему дизайну делает свои кнопки и поля форм на вашем сайте.

Адаптивная верстка — с чего начать

Поговорим по порядку с чего начать делать адаптивную верстку и какие сложности могут быть при этом.

Что использовать для верстки:

Думаю не ошибусь если, скажу что начинать надо с изучения простого определения браузера при помощи CSS3. То есть чтобы вы могли строить разные стили для разных экранов устройств, а ваш дизайн при сужении окна браузера менялся так, чтобы посетителям сайта было удобно с ним работать.
Вот собственно эти стили их вам будет достаточно для начала:

Адаптивный css для верстки сайта

/* Для больших экранов */ @media (min-width: 1200px) { ... } /* Для некоторых нетбуков и планшетов (таблеток) */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Для планшетов и некоторых телефонов */ @media (max-width: 767px) { ... } /* Для телефонов и некоторых устройств у которых совсем маленький экран */ @media (max-width: 480px) { ... }

/* Для больших экранов */ @ media (min - width : 1200px ) { . . . } /* Для некоторых нетбуков и планшетов (таблеток) */ @ media (min - width : 768px ) and (max - width : 979px ) { . . . } /* Для планшетов и некоторых телефонов */ @ media (max - width : 767px ) { . . . } /* Для телефонов и некоторых устройств у которых совсем маленький экран */ @ media (max - width : 480px ) { . . . }

С помощью приведенного выше кода вы сможете выставить настройки отдельных блоков и стилизовать их под разные экраны устройств, но кроме этого необходимо, чтобы и устройства понимали, что ваш сайт сделан для них. В этом может нам помочь код viewport .

viewport - для мобильных устройств

< meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

Бонус в пользу адаптивных сайтов

Поисковые системы уже намного лучше распознают адаптивные сайты и меняют выдачу под них. То есть ваш сайт, сделанный по правилам адаптивной верстки, скорее всего, будет выше для тех, кто ищет информацию с мобильных устройств, чем простые и скучные сайты которые нужно уменьшать и увеличивать на экране, чтобы на них прочесть хоть что-то. Такой вывод пришел ко мне из опыта разработки сайта для юридической компании и анализа его статистики. Google и Yandex любят удобные сайты, но учитывая, что такие сайты стоят в 3 — 4 раза дороже , не каждый может себе позволить заказать адаптивный дизайн и разработку под этот дизайн. Стоимость обусловлена тем что нужно рисовать дизайн под 3-4 устройства и верстать также под разные устройства, а такие CSS фреймворки как Bootstrap далеко не всегда могут решить все поставленные задачи которые на придумывал клиент).

Поговорим немного о Bootstrap

Первое что хотелось сказать о Bootstrap , не ищите документации нигде кроме официального сайта, у них там документация насколько хорошо описана, что врядли кто сможет лучше и по шагам расписать все возможности этого мега-фреймворка. Скорость верстки увеличивается в разы, но только в том случаи если клиенту нужен простой сайт без выдумок. Но когда сайт делается по всем требования клиента, иногда лучше этот фреймворк оставить и начать делать все просто вручную. Фреймворк отлично подойдет для тех, кто хочет научиться делать интерфейсы, например для панелей администратора, где уникальность дизайна не играет большей роли, но надо сделать все удобно. Бэкэнд сайта сделанный на bootstrap получается очень удобным и лаконичным, очень советую.

Тексты в адаптивной верстке

Для того чтобы сайт смотрелся хорошо на всех экранах недостаточно только перестраивать блоки, изменять их размер и назначение при помощи css фреймворков и JavaScript , нужно еще и помнить как ведет себя текст на разных экранах. Если на маленьком экране телефона в 480 пикселей текст хорошо смотрится на 12 пикселях, то на большем экране этот текст нужно увеличивать, так как на больших мониторах никто не смотрит на текст впритык, а читают его издалека. Недолго покопавшись в Интернет, я нашел отличную отличный плагин написанный на jqery. Называется плагин FitText и находится . Все, что вам надо сделать, это подключить плагин и вызвать его для нужных элементов страницы.

Пример использования fittext

$("#fittext1").fitText(); $("#fittext2").fitText(1.5); $("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: "75px" });

$ ("#fittext1" ) . fitText () ; $ ("#fittext2" ) . fitText (1.5 ) ; $ ("#fittext3" ) . fitText (1.1 , { minFontSize : 50 , maxFontSize : "75px" } ) ;

У плагина есть одна особенность, он работает только с блочными элементами (block, block-inline).

Проблемы при адаптивной верстке:

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

На iphone трансформация работает по другому, причем во всех устройствах по разному. Когда вы выставляете 3D поворот объекта в CSS3 = 0 градусов, то объект таинственным образом может повернуться под некоторым углом, вместо того чтобы исчезнуть.

Для адаптивной верстки веб-дизайнер должен быть обучен всем тонкостям и если вы знаете PhotoShop, советую запастись примерами качественных адаптивных дизайнов в формате PSD, для примеров как делать надо или не надо. Также вам понадобиться гора терпения и никаких отговорок (почему разработчику надо учить PhotoShop или SEO, которые я слышу все чаще). Мой вам совет из опыта , никогда не работайте с именитыми дизайнерами, которые к веб-дизайну не имеют никакого отношения. Был плохой опыт работы и мороз со стороны дизайнера.

Работая с Bootstrap вам надо будет дорабатывать фреймворк если клиенту нужен макет больше чем 1200 пикселей в ширину. Хотя там работы не так много, но на сложных проектах мороки много, плавали, знаем…

Тестировать адаптивный дизайн часто приходится в разных браузерах и даже в разных версиях, то же касается и разных устройств. Например, на iphone3 и iphone4 разница большая, меньше разница между iphone4 и iphone5. Устройства Android вам тоже понадобятся, так как там свои хитрости при выделении блока или написания в форму текста. Если денег на покупку кучи устройств нет, то можно использовать специальные сервисы как этот , но он только меняет размер экрана и не меняет отображение элементов, как это делают устройства.

Пока на этом сложности больше не замечал, но если знаете пишите буду проверять и дописывать. Иногда для отдельных случаев нужно определить тип устройства до загрузки страницы в браузере, в таком случаи советую использовать класс написанный на языке php. Скрипт поможет определять размер экрана посетителя сайта и устройство, с которого тот зашел до загрузки сайта, на стороне сервера. .

Если вам нужно чтобы ваши блоки плавно менялись на сайте, можно использовать анимацию CSS3 в ваших стилях для всех блоков.

Плавная трансформация блоков CSS3

*{ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }

Webkit - transition : all 0.3s ease ; Moz - transition : all 0.3s ease ; O - transition : all 0.3s ease ; Ms - transition : all 0.3s ease ; transition : all 0.3s ease ;

Если ваш дизайн не позволяет сделать плавную трансформацию всех элементов на странице, то вы можете просто заменить (*) на (любой дугой элемент) или запретить анимацию для отдельных блоков как в примере ниже.

transition - отмена трансформации

Class-block, .class-block * { /*CSS transitions*/ -o-transition-property: none !important; -moz-transition-property: none !important; -ms-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; /*CSS transforms*/ -o-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; /*CSS animations*/ -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; }

Class - block , . class - block * { /*CSS transitions*/ O - transition - property : none ! important ; Moz - transition - property : none ! important ;

Для того, чтобы верстка вашего сайта хорошо смотрелась на Iphone или на планшетах - ее на)до адаптировать под эти устройства и важно делать это качественно...

Адаптивная верстка сайта (иногда ее еще называют mobile-friendly) - ПОДРОБНО и по шагам как на уроке:

Обратите внимание: что у Яндекса и Google - есть свои инструменты, при помощи которых вы можете проверить сайт на адаптивность. У Яндекса в новой версии Вебмастера он находится так: инструменты - проверка мобильных страниц.

Если вы хотите знать как сделать адаптивный дизайн сайта - то об этом будет написано ниже и подробно в примерах, НО, если у вас нет навыков работы с css - то будет сложнее. Или это может сделать ваш программист или вебмастер.

Отзывчивый дизайн сайта - предполагает задание ширины окна страницы и ширину колонок и сайдбаров в %, в адаптиве - в px.

Обратите внимание: если у вас популярный движок вашего сайта, типа wordpress, то у них нет "головной боли" с адаптивным дизайном - все там делается парой кликов мыши - просто устанавливается и активируется плагин и ВСЕ). Например для WP - использовал WPtouch - очень хорош, но, если есть штатный программист - то лучше делать индивидуально этот момент.

Нужно понять, что в основном при адаптивной верстке часто манипулируют: шириной (width элемента: max-width и min-width), float (обтеканием, его убирают по мере уменьшения ширины окна), font-size (меняют высотку букв).

1) Вначале нужно прописать специальный метатег для разных типов девайсов:

2) Адаптив параметров страницы (ширины и высоты):

Container {
width: 800px
max-width: 90%;
}

В данном случае задается фиксированная ширина контейнера, но она не должна быть более 90% от ширины окна и это очень удобно - тогда сайт сам будет подстраиваться под размер окна.

3) Css адаптивна верстка для картинок всего сайта :

img { max-width: 100% ;
height: auto;
}

Тут мы показываем, что размер картинки : максимум его ширины должен быть не более 100% ока - таким образом картинка сама подстраивается под размер телефона или другого гаджета. Вот такой вот простой метод - адаптивный дизайн картинок.

4) Адаптивная верстка текста сайта : в данном случае манипуляции происходят с высотой шрифта: font-size и другими параметрами.

Break-word { word-wrap: break-word; }

Этот CSS предназначен для расстановки переноса, если есть длинные не переносимые слова.

Есть много ошибок по размеру шрифта: Яндекс любит писать - Размер текста слишком мал для чтения на мобильных устройствах - для этого делаем так:

body {font-size: 16px} - это позволит избежать этой ошибки, а уже для тега p и для ссылок нужно отдельно проставить. Именно из-за того, что в теге body стоит font-size: 12 или 14 px - именно поэтому выходит эта ошибка! И выйдет вот такой вердикт:

5) Адаптация 3 колоночного дизайна или 2 колоночной верстки - в этом нет ничего сложного, если все сделано на div - ах то обычно нужно отменить обтекание, то есть выставить float в none и блоки опустятся вниз.

6) Адаптив CSS для видео (с Хабра):

Video {
position: relative;
padding-bottom: 56.25% ;
height: 0 ;
overflow: hidden;
} .video iframe ,
.video object ,
.video embed {
position: absolute;
top: 0 ;
left: 0 ;
width: 100% ;
height: 100% ;
}

Media Queries - медиа запросы

Для создания адаптивного диза часто используют media запросы (они задают правила исходя из размеров экрана по ширине - исходя из разрешения экрана).

Вот заготовочка media queries - под какие разрешения делать адаптивный дизайн:

@media only screen and (max-width: 1200px) {

@media only screen and (max-width: 992px) {

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {

@media only screen and (max-width: 480px) {

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
/**/
}

/*========== Mobile First Method ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width: 320px) {
/**/
}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 480px) {
/**/
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
/**/
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
/**/
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
/**/
}

Но можно и избежать медиа запросов, задавая ширину колонок и блоков сразу в процентах.

При медиа запросах начинаем сверху: все что сделали допустим для max-width: 768 будет срабатывать и при 480.

Какие бывают проблемы при адаптации сайтов для мобильных устройств

Например Яндекс может такое выдать - Есть горизонтальная прокрутка :

Это у вас что-то с padding или margin - обнулите их для родительских селекторов (блоков) и будет вам счастье.

И в конце Яндекс Вебмастер показывает такое:

Тоже делал 4 часа, в первый раз всегда сложно! Но далее, уже за пару часиков можно делать! И отправляем в вебмастер на перепроверку, чтобы побыстрее - важно для SEO .

А вообще, сегодня многие используют готовые заготовки - Бутстрап и мучений практически нет -

Всем привет!

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

Недавно мне дали сверстать макет мобильного приложения и я решил наконец попробовать побороть эту боль, сделать красиво и лаконично - использовать 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 и сайтов топовых веб студий)?