Адаптивная вёрстка — как побороть боль? Адаптивная вёрстка. Пример вёрстки макета Css html верстка адаптивная

02.03.2024 Ноутбук

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

1. Видео (демо) Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы:

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%; }

2. Максимальная и минимальная ширина (демо) Max-width помогает определить максимально возможную ширину объекта. В примере ниже ширина div"а - 800 пикселей при возможности, но не более 90% ширины:

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

Так же можно масштабировать изображение:
img { max-width: 100%; height: auto; }

Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак:

@media \0screen { img { width: auto; /* for ie 8 */ } }

Min-width - противоположность max-width, позволяет задать минимальную ширину объекта. В примере ниже благодаря min-width масштабируется текстовое поле:

3. Относительные значения (демо) Если в адаптивной верстке использовать относительные значения в нужных местах, можно значительно сократить CSS код страницы. Ниже представлены примеры.Относительный margin Пример верстки вложенных комментариев, где вместо абсолютных значений используются относительные. Как видно из скриншота, второй способ гораздо читабельнее:

Относительный размер шрифта При использовании относительных значений (em или %) шрифта наследуются также относительные значения межстрочного пространства и отступов:

Относительный padding На скриншоте ниже хорошо видно преимущества относительных значений padding перед абсолютными:

4. Трюк с overflow:hidden (демо) Можно очистить float от предыдущего элемента и оставить контент внутри контейнера, используя overflow:hidden, что бывает очень полезно в адаптивной разметке. Наглядно - в демо .

5. Перенос слов (демо) При помощи CSS можно переносить непереносимые текстовые конструкции:
.break-word { word-wrap: break-word; }

У Вас в браузере заблокирован 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, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.

От автора: в будущем в мире интернета ожидается постоянный прирост мобильного трафика. Значит, уже сейчас нужно уметь верстать так, чтобы ваш проект хорошо выглядел на всех устройствах. Решение давно найдено – адаптивная верстка сайта! О ней мы и поговорим.

2 способа угодить мобильным пользователям

Простейший способ определить, как сверстан сайт – это уменьшить размеры окна. Если появилась горизонтальная полоса прокрутки, значит это фиксированная верстка. Все размеры задавались, скорее всего, в пикселах. Удобно ли будет пользоваться таким сайтом пользователям на мобильных устройствах? Нет.

По сути, есть два решения этой проблемы. Первый – создать разные версии верстки (для ПК, для планшетов и для мобильных телефонов). Именно так сделано, например, в социальной сети Вконтакте. Второй вариант – сделать адаптивную верстку. Такой сайт будет реагировать на изменение ширины окна. Этот вариант сегодня применяется все чаще и чаще.

Рис. 1. Как видите, даже на мобильном телефоне webformyself неплохо отображается.

Адаптивность – начало пути

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

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

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

Давайте разберемся подробнее с этой записью.

@media – собственно обозначение медиа-запроса

Screen – указываем, что это относится к экрану (тут можно также указать телевизор или проектор). Only – означает, что правила будут применены только к screen.

And (и) – добавление условия, для которого будет работать медиа-запрос. Условие добавляется в круглых скобках.

Max-width: 980px – само условие. Простым языком это означает, что медиа-запрос будет работать, когда ширина экрана составляет максимум 980 пикселей (то есть от 0 до 980рх). Если ширина больше 980, правила не сработают. Чаще всего здесь в качестве условия выступают max-width, min-width, max-device-width, min-device-width. Последние два означают, что правила будут работать только на самих мобильных устройствах (то есть при изменении ширины окна на компьютере горизонтальный скролл появится). Также можно указывать max-height, но это используют очень редко.

{} – в этих фигурных скобках как раз прописываются все css-правила. Их может быть сколько угодно. Приведу сразу пару примеров, чтобы вам было понятно:

@media only screen and (max-width: 980px){ .selector{background: black} } @media only screen and (min-width: 600px){ img{float: left} }

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

Selector { background : black }

@ media only screen and (min - width : 600px ) {

img { float : left }

Переводим на человеческий язык: если ширина окна меньше 980 пикселей, то к элементу с классом selector будет применено правило {background: black}. Еще более простым языком – фон этого элемента станет черным.

Второй пример: если ширина окна больше 600 пикселей, то все изображения будут прижаты к левому краю.

До вас уже дошла вся гениальность этого способа верстки? По сути, с помощью медиа-правил вы можем скорректировать существующие или дописать новые css-правила. Таким образом, вы сможем реализовать полностью адаптивный шаблон.

Рис. 2. Пример медиа-запроса, в котором прописываются правила для широкоэкранных мониторов.

Подробнее об адаптивности

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

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

Сложно ли освоить адаптивную верстку?

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

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

Проще всего делать это в браузере. Например, у меня в Google Chrome при нажатии F12 появляется отладчик. Попробуйте теперь изменить размеры окна. В правом верхнем углу вы увидите значение его ширины. Это очень удобно для того чтобы быстро проверить свою верстку. Еще я могу порекомендовать responsivetest.net. Сервис достаточно удобен и отлично проверяет адаптивность.

Рис. 3. При зажатии F12 появляется отладчик. Теперь в правом верхнем углу можно видеть текущую ширину окна при изменении.

Почему адаптивная верстка?

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

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

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

Понятие адаптивности

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

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

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

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

Основные принципы адаптивности

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

А достигается это двумя путями:

Удаление (скрытие) блоков и/или перераспределение их между собой;

Изменение размеров блоков в зависимости от ширины экрана.

Классический пример — это перемещение боковой колонки сайдбара под основной контент.

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

Как убрать блок сайдбара в зависимости от ширины экрана

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

В простейшем случае CSS код будет выглядеть так:

@media only screen and (max-width: 1199px) { .content{float: none;} .sidebar{float: none;} }

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

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

... ...

Автоматическая ширина блока — резиновая верстка

Так же следует поработать с шириной блоков контента и сайдбара. Необходимо сделать их «резиновыми» при просмотре на мобильных клиентах:

@media only screen and (max-width: 1199px) { .content {width:100%;} .sidebar {width:100%;} }

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

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

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

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

Проблема длинных слов

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

Hyphenate { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

Адаптивное меню сайта

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

Чтобы реализовать задуманное необходимо создать два взаимоисключающих объекта. К примеру основное меню должно быть скрыто на мобильных экранах, но при этом должна появиться кнопка открывающая это меню. На экранах компьютеров наоборот: основное меню должно быть видно, а кнопка его вызова скрыта.

На CSS это реализуется очень просто.

#mainmenu {display:block;} #mobilemenu{display:none;} @media only screen and (max-width: 1199px) { #mainmenu {display:none;} #mobilemenu{display:block;} }

Как только ширина экрана станет меньше 1200 пикселей, то основное меню исчезнет с экрана, а появится ссылка на его открытие (точнее будет показан блок со ссылкой или кнопкой).

Обратите внимание, что в данном случае используются ID блоков, а не класс стилей. И код основного меню будет выглядеть примерно так:

<div id="mainmenu">Основное меню сайта

Чтобы показать основное меню по нажатию на кнопку, добавим небольшой скрипт в секцию HEAD :

function showmobilemenu() { if (document.getElementById("mainmenu").style.display == "block") {document.getElementById("mainmenu").style.display = "none"} else {document.getElementById("mainmenu").style.display = "block"} }

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

Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly . В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.

Проверить отображение страницы на мобильных устройствах можно на сервисах и .

Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам Что такое адаптивная вёрстка

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

Основные приёмы создания адаптивного сайта приведены в статье . Для отзывчивого дизайна ширина основного контейнера сайта задаётся в % , при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в % . В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px .

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

Вёрстка главной страницы

Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px .

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

Рис. 2. Пример адаптивной верстки 1. Метатеги и раздел

1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

Адаптивная вёрстка сайта

2. Шапка страницы

В шапке страницы поместим следующие элементы-контейнеры:
логотип ;
кнопку для показа/скрытия главного меню ;
главное меню

;
форму поиска по сайту .

L O G O

Анонс статей обернём элементом :

Дизайн Весна

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

В боковую колонку добавим список категорий, последние записи и форму подписки на рассылку:

Категории

В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:

Общие стили, сброс стилей браузера по умолчанию:

*, *:after, *:before { box-sizing: border-box; padding: 0; margin: 0; transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/ } ul { list-style: none; } a { text-decoration: none; outline: none; } img { display: block; width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display"; font-weight: normal; letter-spacing: 1px; } body { font-family: "Open Sans", arial, sans-serif; font-size: 14px; line-height: 1; color: #373737; background: #f7f7f7; } /* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after { content: ""; display: table; clear: both; } /* стилевой класс, который управляет шириной контейнера сетки*/ .container { margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px; }

Подвал сайта разделим на три равных столбца:

Footer { padding: 30px 0; background: #3C3D41; color: white; } .footer-col { width: 33.3333333333%; float: left; } .footer-col a { color: white; } .footer-col:last-child { text-align: right; } .social-bar-wrap { text-align: center; } .social-bar-wrap a { padding: 0 7px; font-size: 18px; }

За показ-скрытие верхнего меню при клике на кнопку (переключается высота меню - от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом :

$(".nav-toggle").on("click", function(){ $("#menu").toggleClass("active"); });

Адаптивная вёрстка — как побороть боль? Адаптивная вёрстка. Пример вёрстки макета Css html верстка адаптивная

Лучшие статьи по теме