Меню
Бесплатно
Регистрация
Главная  /  Интернет  /  Адаптивная верстка как сделать. Самые простые техники адаптивной верстки

Адаптивная верстка как сделать. Самые простые техники адаптивной верстки

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

Если говорить простыми словами, под адаптивной или «отзывчивой» вёрсткой понимают такое расположение блоков и элементов, которое подстраивается под размер и разрешение экрана устройства, при помощи которого страница открыта.

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

Самая критичная величина - это ширина окна браузера. Минимально, на самых бюджетных смартфонах это 240-360px, но в большинстве случаев всё же 480 px и выше. И это более чем в два раза меньше, чем стандарт мониторов с шириной 1024 пикселей.

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

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

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

Итак, наши требования к его адаптивности таковы:

  • Ширина основной части должна растягиваться на больших разрешениях, но до определенной величины, ведь слишком длинные строки не удобно читать.
  • При уменьшении ширины браузера изображения должны пропорционально сжиматься, чтобы не выходить за границы области.
  • При ширине менее 700 пикселей (минимум – планшет или смартфон с hd экраном в портретной ориентации) три блока внизу должны выстроиться друг за другом и занимать 100% ширины основного блока.
  • Так же, при этом левый сайдбар должен сворачиваться, в узкую полосу освобождая место для основной части.
  • Предусмотреть кнопку, тап по которой раскрывает и закрывает сайдбар, который теперь должен быть позиционирован над основным блоком, в виде всплывающего меню.

Начнём. Я создал файл index.html, и папки css и images, куда поместил соответственно файл стилей и вырезанные из макета картинки.

В HTML файле создадим два корневых контейнера.left_side и.wrapper соответственно для левого меню и основной части. В.left_side поместим некоторую разметку логотипа, социальных ссылок и ненумерованного списка меню.

В правом основном блоке каждый пост обернём div-ом с классом.text_block, добавим текст-заполнитель с инструмента яндекс-рефераты, и изображения для примера.

В низ добавим три блока.footer_block, обернём их в общий.footer. Статьям добавим заголовки H2, H3, и в итоге получим разметку подобную этой:

Пример адаптивной вёрстки макета. Heaven Web - блог для веб мастера. Блог о веб разработке

  • Главная
  • Вёрстка
  • Jquery
  • Drupal
  • Другое
  • Контакты
Из ряда вон выходящий план размещения: методология и особенности

Здесь текст с яндекс рефераты...

Ещё некоторое кол-во текста с картинками

Первый заголовок

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

Второй заголовок

Исходя из структуры пирамиды Маслоу, лидерство в продажах упорядочивает принцип восприятия, отвоевывая свою долю рынка.

Третий заголовок

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

Обратите внимание на 6 строку. Дело в том, что мобильные устройства масштабируют веб страницы для удобного просмотра, однако, нам это не нужно. Этой meta записью мы запрещаем масштабирование страницы.

Теперь займёмся стилями CSS. Оформим левый блок:

Left_side{ background: #1d282b; width: 300px; position: fixed; left: 0; top: 0; height: 100%; z-index: 5; } .logo_text{ padding: 20px 10px; color:#ffffff; font-size: 24px; line-height: 30px; font-weight: normal; font-family: myPTNarrow; text-align: center; } .logo_text a{ display: inline-block; } .logo_text span{ color:#72898f; font-size: 18px; line-height: 24px; padding: 0 10px 18px; text-align: center; display: block; } .left_menu{ margin-top: 30px; } .left_menu ul{ display: block; list-style-type: none; } .left_menu li{ display: block; height: 30px; line-height: 30px; } .left_menu li a{ display: block; line-height: 30px; font-size: 18px; font-family: myPTNarrow; color:#ffffff; text-decoration: none; padding-left: 60px; } .left_menu li a:hover{ background: #343e41; } .social_img{ text-align: center; } .social_img a{ display: inline-block; margin: 0 10px; width: 30px; height: 30px; overflow: hidden; } .social_img a:hover{ opacity: 0.7; } .tw_icon{ background: url("../images/social.png") top left no-repeat; } .go_icon{ background: url("../images/social.png") top right no-repeat; } .left_swap{ display: none;/* По умолчанию блок не виден, он показывается, если срабатывает медиазапрос */ position: fixed; width: 50px; left: 0; top: 0; height: 100%; z-index: 6; background: url(../images/swipe.png) #1d282b center 20px no-repeat; }

Здесь для контейнера.left_side мы указали position: fixed. Это свойство позволит блоку всегда оставаться слева (благодаря left: 0; top: 0; и height: 100%;) и не прокручиваться с основным контентом. Чтобы блок наверняка не перекрывался ничем добавим z-index: 5.

Так как ширина левого блока 300 пикселей, то центральный блок (.wrapper) должен иметь внутренний отступ от левого края - padding-left: 300px, чтобы не «попадать» под левое меню.

Общий код центрального блока:

Wrapper{ position: relative; background: #ffffff; min-height: 200%; min-width: 400px; max-width: 1200px; padding-left: 300px; padding-right: 0px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .wrapper a{ color:#576a6f; } .wrapper a:hover{ color:#1d282b; } .text_block{ overflow: hidden; color:#4a4a4a; font-size: 18px; line-height: 24px; min-height: 200px; background: url("../images/hr.png") left bottom repeat-x; padding: 10px 40px 10px; } p{ margin-bottom: 24px; } .cent_img{ display: block; margin: 0 auto 40px; } .auto_img{ display: block; max-width: 100%; margin: 0 auto 24px; }

Здесь самое важное это оформление ширины этого блока. Для.wrapper укажем свойства

Min-width: 480px; max-width: 1200px;

То есть при увеличении экрана в ширину блок будет расширятся вместе с контентом до 1200 пикселей, затем он останется в левой стороне, а справа будет просто фон. При уменьшении же его, сжиматься он будет до 400px, если сильнее – появится горизонтальный скроллинг.

Изображения внутри центрального блока, должны иметь класс.auto_img. Если они не будут умещаться в ширину, то будут пропорционально сжиматься и будут равны 100% ширины контейнера.

Далее разберёмся с медиа запросами СSS. Все такие запросы выглядят следующим образом. Вначале идёт заголовок @media, затем указывается тип устройства на котором требуется применить css код этого запроса. Для обычного цветного экрана это слово screen (или чаще пишут all то есть для всех устройств). Затем в круглых скобках указываются условия и параметры.

Сейчас нас интересует условие max-device-width которое указывает, что последующие правила будут применяться только для режима, когда максимальная ширина браузера меньше определенного значения, указанного после двоеточия.

То есть одно наше условие будет выглядеть вот так:

@media screen and (max-width:800px){ .left_side{ display: none; } .left_swap{ display: block; } .wrapper{ padding-left: 50px; } }

В фигурных скобках мы уже проставили нужные CSS правила, а именно скрываем левое меню, и показываем скрытый ранее вспомогательный узкий левый блок - .left_swap.

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

@media screen and (max-width:720px){ .footer_block{ display: block; width: 96%; } }

Т.е. элементы перестают быть инлайновыми, и становятся блочными, благодаря чему, выстраиваются друг за другом. Свойством width: 96%, мы увеличиваем их ширину до максимума (не до 100%, т.к. у нас сохраняются паддинги – внутренние поля).

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

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

На последок, оформим с помощью jQuery открытие левого меню по клику на свёрнутом узком левом блоке – на.left_swap. Например так:

JQuery(function($) { $(".left_swap").click(function (){ $(".left_side").toggle(); return false; }); })

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

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

PS: В последнее время на блоге очень много спама в комментариях, не всегда успеваю его чистить, но всё равно все ваши комментарии по делу читаю и постараюсь ответить.

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

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

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

Решение возникшей проблемы – адаптивная верстка , при которой CSS-стили меняются динамически для разной ширины окна браузера.

Пример

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

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

  • просто менять размер экрана браузера,
  • расположить справа панель инспектора компонентов и менять ее ширину,
  • использовать адаптивный дизайн браузера, нажав Ctrl+Shift+M в Firefox или Google Chrome.
    • Что используют для оптимизации сайта под мобильные устройства? Метатег viewport

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

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

    Чтобы сообщить браузеру, что страница адаптируется к любым устройствам, в заголовок документа добавляют метатег viewport.

    Пример Основные свойства метатега
    width Ширина видимой области. Рекомендуемое значение: device-width.
    height Высота видимой области. Рекомендуемое значение: device-height.
    initial-scale Первоначальный масштаб страницы. Принимает значение от 1 до 5. Рекомендуемое значение: 1.
    minimum-scale Минимальный масштаб страницы. Принимает значение, которое должно быть меньше или равным initial-scale. Значение 1 запрещает уменьшение масштаба страницы.
    maximum-scale Максимальный масштаб страницы. Принимает значение, которое должно быть больше или равным initial-scale. Значение 1 запрещает увеличение масштаба страницы.
    user-scalable Разрешает или запрещает возможность масштабирования страницы. Принимает значение true или false.

    Контент шире экрана – часто возникающая проблема, как только задан viewport.

    Это происходит, если каким-то элементам задана большая фиксированная ширина.

    Чтобы не появлялась горизонтальная прокрутка, ширину страницы задают на весь экран, при необходимости ограничивая ее свойством max-width.

    Пример .content { width: 100%; max-width: 1200px; } Медиа-запросы. CSS-стандарт Media Queries

    Возможность применять различное оформление в зависимости от ширины окна дает CSS-стандарт Media Queries .

    Медиа-запрос начинается с правила @media , после которого следует условие применения стилей, состоящее из типа носителя (в приведенном примере all ), логического оператора (and ) и медиа-функции (max-width: 360px ).

    Типы носителей
    all Все типы.
    print Принтеры и другие печатающие устройства.
    screen Экран монитора.
    speech Речевые синтезаторы и программы для воспроизведения текста вслух. Например, речевые браузеры.
    Устаревшие, хотя и корректные типы, которые не дают результата
    braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
    embossed Принтеры, использующие для печати систему Брайля.
    handheld Наладонники, смартфоны, устройства с малой шириной экрана.
    projection Проекторы.
    tty Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
    tv Телевизоры.
    Логические операторы Основные медиа-функции Пример

    Задан размер заголовка:

    H1 { font-size: 72px; }

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

    @media all and (max-width: 360px) { h1 { font-size: 42px; } }

    Новые единицы размеров (vw, vh, rem)
    vw 1% от ширины окна браузера (viewport).
    vh 1% от высоты окна браузера (viewport).

    Благодаря этим единицам теперь в CSS стало легко указать относительную высоту элемента.

    Пример body { min-height: 100vh; }

    Размер шрифта при адаптивной верстке удобно задавать в rem (root em). Эта единица измерения вычисляется на основе размера шрифта корневого элемента . По умолчанию 1rem = 16px. Для простоты вычислений размер шрифта корневого элемента можно задать равным 10px.

    Пример html { font-size: 10px; } body { font-size: 1.6rem; } h1 { font-size: 7.2rem; } @media all and (max-width: 360px) { body { font-size: 1.4rem; } h1 { font-size: 4.2rem; } }

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

    Спецификация Flexbox позволяет контролировать размер, порядок и выравнивание элементов по горизонтали и вертикали, распределение свободного места между ними. Блоки при этом могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.

    Flexbox определяет CSS свойства для flex-контейнера и его дочерних элементов (в приведенном примере соответственно ul.flex и li.flex).

    Пример ul.flex { display: flex; /* flex-контейнер */ flex-wrap: wrap; /* многострочный режим */ justify-content: space-between; /* элементы распределяются равномерно (первый – в начале строки, последний – в конце) */ } li.flex { display: inline-block; flex-basis: 260px; /* базовая ширина элемента */ flex-grow: 1; /* все элементы одинаковой ширины */ max-width: 300px; padding: 8px; }

    В результате: элементы списка растягиваются на всю доступную ширину (с ограничением в 300px):


    На узком экране список станет вертикальным:

    Используя Flexbox, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.

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

    Для тех, кто не в танке и впервые слышит об этой новомодной (с 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%;
    }

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

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

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

    Чем более популярными становятся мобильные устройства, тем сильнее ощущается дискомфорт при скроллинге большинства сайтов. Именно поэтому, начиная с 2012 года, веб-мастерами стало использоваться решение, делающее просмотр ресурсов на экранах с небольшим разрешением более комфортным, - адаптивная вёрстка.

    Современная тенденция

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

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

    Определение адаптивной вёрстки

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

    Раньше проблема решалась несколько иначе. Разработчикам приходилось совершать гораздо больше «телодвижений», создавая вёрстку и дизайн основной версии сайта и то же самое делая для мобильной. В зависимости от экрана устройства, на котором просматривался интернет-проект с имеющейся мобильной платформой, запускалась подходящая версия сайта.

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

    Достоинства адаптивного макета

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


    При наличии у сайта двух платформ внесённые в вёрстку изменения нужно было сначала реализовать в рабочей версии, а после - в мобильной. Если правки в коде были довольно существенными, то процесс внесения таких изменений мог сильно затянуться. При адаптивной вёрстке работа над сайтом ведётся в одном файле. Изменения, внесённые в макет веб-страницы, будут одинаково скоро отображаться как в рабочей версии, так и в мобильной.

    Минусом такого подхода некоторые веб-мастера называют сложность его реализации. Но с появлением CSS 3 создать шаблон адаптивной вёрстки стало совсем просто. Даже не самые опытные веб-мастера могут сделать свой сайт удобным для просмотра на мобильных устройствах.

    Принципы и особенности адаптивной вёрстки

    Какие принципы лежат в основе метода адаптивной вёрстки в веб-дизайне?

    Использование «резинового» типа макета.

    - «Резиновые» изображения.

    Использование медиазапросов (media-queries).

    Необходимость думать о мобильных устройствах с самого начала создания вёрстки.

    Из этих основополагающих принципов такого метода создания шаблона вытекают следующие особенности адаптивной вёрстки:

    1. Проектирование и создание дизайна сайта с учётом работы на всём спектре разрешений: от мобильных до широкоформатных дисплеев.

    2. Вёрстка с помощью каскадных таблиц стилей с использованием технологии медиазапросов, появившейся в CSS 3.

    3. Программирование на стороне как клиента, так и сервера для передачи мобильным устройствам изображения меньшего объёма и разрешения.

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

    С чего начать вёрстку адаптивного макета?

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

    Адаптивная вёрстка, примеры которой можно встретить довольно часто, имеет массу достоинств. Что следует помнить при таком подходе к созданию макета страниц?

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

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

    Всем привет!

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

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