Отзывчивая верстка как сделать

Добавил пользователь Евгений Кузнецов
Обновлено: 16.09.2024

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

Вокабуляр

Прежде чем перейти к мелочам, давайте разберемся с терминологией.

Контентные блоки — это текст, изображение или и то, и другое. Цвет фона не считается контентным блоком, если он не является контейнером для текста или изображения.

Колонки — это блоки, которые составляют ширину контента дизайна. Элементы поля должны располагаться на определенном количестве колонок. Традиционно в дизайн-системе ширина колонок для разных разрешений не меняется, но вот их количество — да: с 12 колонок для десктопа меняется на 8 для планшета и на 4 для телефона. В основном у сеток ширина колонки составляет 60−80 пикселей.

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

Боковые поля — это пространство за пределами ширины контента (увеличивается по мере увеличения ширины устройства). На телефонах обычно они составляют 20−30 пикселей и сильно отличаются от боковых полей сайта на планшетах и десктопе. Но на на любом устройстве боковое поле будет сохранятся (хотя бы минимально) при уменьшении размера браузера.

Ширина контента будет зависеть от сетки, высота — от высоты экрана устройства.

Правила построения

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

1. Элементы поля должны располагаться на целом количестве колонок

Вы можете распределить элементы поля по колонкам как хотите: 6 и 6, 3 на 4, 4 на 3 — как угодно. Но в сумме колонок должно получиться 12, а элемент может занимать только целое число колонок (разместить его, например, на полутора колонках нельзя).

В этом примере карточки профиля, расположенные на разном количестве колонок:

Ок, пока все просто. А если вам нужно разделить контент на определенное число колонок? Вы идеально размещаете элементы на сетке, но элементы оказываются визуально слишком широкими:

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

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

2. Не оставляйте элементы поля в межколоночном интервале

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

3. Элементы внутри блока могут быть не выровнены по сетке, если выровнен сам блок

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

Карточка профиля с родительским элементом, расположенным на шести колонках (слева), без выделения (в центре) и без сетки (справа). Источник

4. Не используйте колонку сетки как боковой отступ

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

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

Дизайн должен заполнять всю ширину сетки (слева), а не оставлять столбец в качестве поля (справа). Источник

5. Элемент на всю ширину экрана или фон должны выступать за пределы сетки

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

Как это все работает

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

На самом же деле верстка должна корректно отображаться при любой ширине браузера. Допустим, дома у вас большой монитор разрешением 3440 пикселей, дизайн десктопной версии сайта — 1920 пикселей, планшетной — 768 пикселей, а мобильной — 375 пикселей. Прямо сейчас вы, скорее всего видите дизайн с шириной контента чуть меньше 1440 пикселей с большими боковыми полями (если находитесь с настольного компьютера в офисе). А что если браузер на один пиксель меньше — 1339 пикселей? Тут несколько вариантов.

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

На адаптиве сайта при переходе от десктопа к планшету вы перейдете к следующей точке излома. Пока вы не достигните следующей точки излома, сокращаться будут только боковые поля (не контент). Текст не будет переносится, а изображения не будут динамически меняться. Если никто не позаботится о том, чтобы все размеры были учтены, какая-то точка излома может быть пропущена. Тогда сайт будет выглядеть обрезанным, пока вы не достигнете следующей после десктопа точки излома в 768 пикселей. Только тогда контент встанет на свои места и все будет выглядеть правильно для планшета. Если вы еще уменьшите масштаб, то произойдет все то же и сайт будет выглядеть так же, пока вы не достигнете следующей точки излома.

Отзывчивая верстка

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

Гибридная адаптивная верстка

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

Предисловие

О статье

Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS, понимающих назначение CSS селекторов и т. д.

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

Виды версток

Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.

Фиксированная верстка

Фиксированная верстка (Fixed Layout) — подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body:

Резиновая верстка

Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:

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

Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина div равная 960px для всех устройств, ширина которых меньше 1200px и 320px для всех устройств, ширина которых меньше 480px.

Отзывчивая верстка

Отзывчивая верстка (Responsive Layout) — это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.

Основные техники реализации сайтов под любое разрешение

Относительные значения

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

Относительные значения для размеров и отступов

Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера — указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.

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

vw — 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
vh — 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
vmin — выбирается наименьшее из vw и vh;
vmax — выбирается наибольшее из vw и vh.

Ниже рассмотрен пример использования vw и vh. В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.

Относительные значения для размера шрифта

Существуют следующие относительные значения для шрифтов:

em — задаёт размер относительно шрифта родителя;
rem — задаёт размер относительно шрифта .

Вычислим размер шрифта для тега body. В данном примере размер шрифта для body задается относительно размера html. Таким образом, размер шрифта для body будет равен 30px (20px * 1.5 = 30px).

Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html — 16px.

Максимальные и минимальные размеры компонентов

Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.

Допустим, что родительским компонентом данного div является body. Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body. Однако он будет увеличиваться только до величины, определенной в max-width, это 500px. Как только контейнер достигнет этой ширины — он перестанет увеличиваться.

Использование медиа-запросов

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

С помощью медиа-запросов можно задать стили для следующих типов устройств:

all — все типы (значение используется по умолчанию)
braille — устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
embossed — принтеры, использующие для печати систему Брайля
handheld — смартфоны и аналогичные им аппараты
print — принтеры и другие печатающие устройства
projection — проекторы
screen — экран монитора
speech — речевые синтезаторы, а также программы для воспроизведения текста вслух
tty — устройства с фиксированным размером символов
tv — телевизоры.

Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.

Ссылки по техникам реализации адаптивной верстки

Подробнее просмотреть и изучить рассмотренные в данной статье подходы и другие можно по ссылкам:

CSS-фреймворки

CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера.
Многие разработчики предпочитают использование CSS-фреймворков, вместо прописывания всех стилей вручную. Это обусловлено следующими причинами:

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

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

Рассмотрим самые популярные CSS-фреймворки.

Bootstrap

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Bootstrap — это инструмент с открытым исходным кодом для разработки сайтов с помощью HTML, CSS и JS. Bootstrap — интуитивно простой и в тоже время мощный интерфейсный фреймворк, повышающий скорость и облегчающий разработку web-приложений.

Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода — от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка:

В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS-препроцессоров: Less и Sass.

12 — колоночная сетка
Большое количество готовых для использования компонентов
Поддержка Less и Sass
Использование Normalize.css.

Material Design for Bootstrap

Material Design for Bootstrap — это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.

12 — колоночная сетка
Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.

Materialize

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

12 — колоночная сетка
Большое количество готовых для использования компонентов в соответствии с концепцией Material Design
Поддержка Sass.

Bulma

Bulma — современный CSS-фреймворк основанный на новом способе отображения Flexbox. Flexbox — самый современный инструмент компоновки, доступный в CSS.

Использование Flexbox вместо колоночной сетки
Большое количество готовых для использования компонентов
Поддержка Sass
Не используются JS-файлы

Pure — набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте. Pure построен на Normalize.css и предоставляет разметку и стили для собственных HTML-элементов, а также наиболее распространенные компоненты пользовательского интерфейса. Pure — адаптивный фреймворк, поэтому элементы отлично смотрятся на всех размерах экрана. Pure имеет минимальные стили, что подразумевает написание собственных кастомизированных стилей.

24 — колоночная сетка
Модульный фреймворк
Не используются JS-файлы
Использование Normalize.css
Минимальное количество готовых компонентов и стилей.

Заключение

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

Область просмотра (viewport) - основная часть браузера, где отображается контент.

Чтобы @media запросы корректно работали на мобильных устройствах необходимо добавить специальный мета тег

Мета тег отвечает за размер области просмотра и масштаб страницы на мобильных устройствах

Мета тег размещаем в HTML файле в секции

Для мета тега добавляем атрибут content="" и указываем в нём необходимые свойства через запятую

width=device-width - область просмотра (viewport) будет равняться ширине мобильного устройства

initial-scale=1 - устанавливает масштаб страницы при первой загрузке

Этих свойств достаточно, чтобы @media запросы корректно работали на мобильных устройствах

Существуют дополнительные свойства, которые можно добавить для мета тега в атрибуте content=""

maximum-scale=3.0 - устанавливает максимально возможное значение масштабирования

minimum-scale=0.86 - устанавливает минимально возможное значение масштабирования

user-scalable=no - запрещает масштабирование

shrink-to-fit=no - исправляет отображение области просмотра (viewport) в браузере Safari на iOS

Как узнать размеры области просмотра (viewport)?

Для разработки и тестирования адаптивной вёрстки по размерам области просмотра (viewport) необходимо определить эти размеры

Браузеры Google Chrome и Mozilla Firefox имеют инструменты для тестирования адаптивной вёрстки, которые отображают размеры внутреннего окна и могут устанавливать необходимый размер окна по введенным значения

Чтобы открыть инструмент для адаптивной вёрстки в Mozilla Firefox нажимаем клавишу F12 и в инструментах разработчика в правом верхнем углу нажимаем на иконку со смартфоном и планшетом

Окно станет выглядеть следующим образом

В Google Chrome аналогично - нажимаем клавишу F12 и в инструментах разработчика в левом верхнем углу нажимаем на иконку со смартфоном и планшетом

Окно станет выглядеть следующим образом

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

Если кратко, то на мобильных устройствах и в браузерном инструменте для адаптивной вёрстки полоса прокрутки (scrollbar) не влияет на размеры контентной части, а в десктопных браузерах когда появляется полоса прокрутки (scrollbar), то она отнимает у контентной части около 17px. На мобильных контент будет на всю ширину браузера, а к примеру, на десктопных браузерах при ширине 1200px, если есть полоса прокрутки, то контентная часть будет около 1183px - этот нюанс не самый очевидный, но нужно его учитывать

@media запросы

Существует два подхода адаптивной вёрстки по размерам области просмотра (viewport) - Mobile First и Desktop First.

При Mobile First верстаем от меньшего экрана к большему и применяем @media (min-width: 1200px)

При Desktop First верстаем от большего экрана к меньшему и применяем @media (max-width: 1199.98px)

На практике Mobile First встречается реже, чем Desktop First, поэтому обычно сначала верстаем макет для больших экранов, затем с помощью @media запросов адаптируем макет под меньшие экраны, используя контрольные точки (breakpoints).

@media запросы записываются в CSS файле следующим образом

Разница в 0.02px нужна для избежания пересечения @media запросов, чтобы разные стили не применялись для двух разных @media запросов одновременно

Контрольные точки (breakpoints)

Для примера возьмем контрольные точки, которые используются в Bootstrap

Bootstrap использует @media запросы основанные на размерах большинства устройств, поэтому не обязательно придумывать свои контрольные точки, а при необходимости можно добавить еще @media запросы или изменить существующие

Логика адаптивной вёрстки Desktop First

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

Устанавливаем ширину окна браузера в 1200px - минимальная ширина до первого @media запроса @media (max-width: 1199.98px) < >.

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

Устанавливаем ширину браузера в 992px - минимальная ширина до следующего @media запроса @media (max-width: 991.98px)

Делаем первый @media запрос - @media (max-width: 1199.98px)

При ширине окна браузера 992px элементы сужаются, выходят за границы окна браузера, создают горизонтальную полосу прокрутки (scrollbar). Поэтому внутри @media запроса @media (max-width: 1199.98px) < >начинаем переназначать предыдущие стили элементов так, чтобы вёрстка выглядела корректно - уменьшаем отступы, размер шрифта, какие-то элементы переносим или скрываем и так далее - все зависит от требований к макету.

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

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

Когда вёрстка при ширине браузера 992px выглядит корректно, то устанавливаем браузеру ширину в 768px - минимальная ширина до следующего @media запроса @media (max-width: 767.98px) < >.

Переназначаем стили в блоке @media запроса @media (max-width: 991.98px) < >, чтобы вёрстка выглядела корректно теперь при ширине 768px

Далее устанавливаем ширину 576px и переназначаем стили в блоке @media (max-width: 767.98px)

Если дизайнер/заказчик не указали минимальную ширину для адаптивной вёрстки, то устанавливаем 320px. Для этой ширины переназначаем стили элементов в блоке @media запроса @media (max-width: 575.98px)

Когда вёрстка будет выглядеть корректно при всех вышеописанных размерах браузера (1200px, 992px, 768px, 576px, 320px), проверяем вёрстку плавно изменяя размер окна от большего к меньшему, чтобы убедиться что при промежуточных размерах вёрстка не ломается. При неоходимости корректируем стили элементов в том блоке @media запроса, где элементы отображаются некорректно, для этого используем инструменты разработчика (devtools) в браузере

Инструменты разработчика (devtools)

Инструменты разработчика позволяют быстро найти элемент, посмотреть его размеры, отступы, стили, расположение стилей, использование @media запросов, менять значение свойств прямо в браузере

Открыть инструменты разработчика можно нажатием клавиши F12

Чтобы просмотреть сразу расположение элемента и отобразить его свойства нажимаем правой кнокой мыши на элемент и выбираем Исследовать элемент в Mozilla Firefox или Просмотреть код в Google Chrome

Например, хотим узнать про элемент заголовка карточки, нажимаем на нём правой кнопкой мыши и выбираем Исследовать элемент в Mozilla Firefox

Открывается окно инструментов, где с левой стороны видим расположение элемента в HTML, а справой стороны CSS свойства элемента

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

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

Значение можно писать вручную или постепенно менять значение стрелками вверх или вниз на клавиатуре.

При вводе значения вручную будут выводиться подсказки

Если значение некорректно и не применяется, то будет перечеркнуто

Можно самостоятельно отключить необходимое свойство, нажав на чекбокс перед этим свойством

Можно назначить новое свойство, нажав на пустое место в пределах блока свойств элемента. Также будут выведены подсказки возможных свойств

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

Также можно посмотреть расположение стилей - указывается имя файла, строка в файле и использование @media запросов

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

Полный пример на Codepen

Ниже распишу только ключевые моменты адаптивности

Начальные стили десктоп вёрстки при ширине 1200px

При ширине 992px карточки немного сужаются, но все еще отображаются корректно, поэтому пока без изменений

При ширине 768px карточки становятся очень узкими, поэтому переназначаем свойство карточки width , чтобы карточки отображались по две в ряд

При ширине 576px карточки также становятся узкими, поэтому снова переназначаем свойство карточки width чтобы карточки отображались по одной

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

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

Дополнительно

Немного дополнительной информации по адаптивной вёрстке

@media запросы по размерам viewport могут быть как по ширине, так и по высоте, но используется обычно реже

@media запросы можно комбинировать, например нужны только стили для планшетных экранов в диапазоне от 576px до 767.98px

Стили назначенные в таком @media запросе будут применены только если все условия выполнены

Можно определять свойства сразу для нескольких разных условий - такой @media запрос выполняется если хотя бы одно из перечисленных условий выполнено, например экраны меньше 575.98px и больше 1440px

Для упрощения адаптивной вёрстки желательно использовать Flexbox, Grid.

Желательно стараться использовать не фиксированные, а относительные величины (%, vw, vh, em, rem и так далее)

Итоги

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

На практике можно применять дополнительные возможности @media запросов отталкиваясь от уже полученной информации.

Виды верстки

Существует четыре основных вида верстки сайта:

фиксированная;
резиновая;
адаптивная;
отзывчивая.

Каждая основана на своих принципах, поэтому подходит для решения разных задач.

Фиксированная верстка

Обеспечивает отображение страниц сайта с заданной шириной — она не меняется в зависимости от устройства, на котором открывают сайт.

Фиксированная верстка не дает возможно удобно просматривать страницы / code-flow.club

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

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

Технически этот тип верстки реализуется при помощи тега body, в котором задается конкретная фиксированная ширина width:

Резиновая верстка

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

Например, минимальная ширина страницы – 400 пикселей, а максимальная — 1000. В зависимости от параметров устройства и браузера страница растянется в этих пределах.

Для резиновой верстки используются значения max-width (максимальная ширина) и min-width (минимальная ширина). Точно также можно задать и высоту страницы: max-height (максимальная высота) и min-height (минимальная высота).

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

Этот тип верстки — динамический. Все элементы страницы автоматически меняются, учитывая параметры устройства, на котором просматривают сайт. Таким образом можно изменять не только высоту и ширину страницы, но и размер шрифта, цвета, размеры и расположение объектов.

Для адаптивной верстки используются не только теги, но и медиа-запросы (@media). Они позволяют автоматически определять тип устройства и разрешение экрана. С учетом этих данных страница отображается с подходящими параметрами:

Так, при ширине монитора больше 1000 пикселей размер элемента становится фиксированным — 900 пикселей. Аналогично при минимальной ширине в 400 пикселей он ограничивается 280 пикселями.

Отзывчивая верстка

Это вариант с полной адаптацией сайта к любому устройству.

Отзывчивая верстка адаптирует сайт к любому виду устройства

В нем комбинируются решения и резиновой, и адаптивной версток. От первой берется процентное соотношение ширины компонентов, а от второй — медиа-запросы:

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

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

Относительные значения

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

Для размеров и отступов

С их помощью можно определить:

width — ширину;
height — высоту;
margin — расстояние от одного блока до другого;
padding — отступ от содержимого до края блока.

Можно воспользоваться единицами vw и vh. Обе они обозначают, по сути, то же самое, что и проценты: в первом случае — 1% ширины, а во втором — 1/100 долю высоты экрана.

При выборе варианта vmin произойдет автоматическая подстановка минимальных значений vw и vh. Чтобы выбрать максимальные, воспользуйтесь vmax.

Учтите только, что эти единицы нужно использовать внутри тега div. Например, чтобы определить его высоту и ширину как 70% от размера экрана, пропишите 70vw и 70vh:

Для размера шрифта

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

Главное отличие rem от em в том, что значение rem будет для всего документа одним и тем же. В том время, как em может быть разным в каждом элементе страницы.

Так, например, при определении размера h1 как 3em для корректного отображения параметр margin-left автоматически определяется как 0,333em. С помощью rem его можно задавать как 1rem и он будет соответствовать всем другим расстояниям между элементами на странице:

Максимальные и минимальные размеры компонентов

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

Напомним, что для определения ширины используются max-width и min-width, для высоты — max-height и min-height.

Например, определим высоту компонента div (параметр height) как 70%. Но если max-height задана как 2000px, то именно этот размер станет предельным. После его достижения высота расти не будет:

Как использовать медиа-запросы

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

ширины окна браузера;
альбомной или книжной ориентации;
плотности пикселей и других.

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

all (все или по умолчанию);
print (режим предварительного просмотра перед печатью);
screen (цветные мониторы);
speech (синтезаторы речи).

Есть и несколько других медиа-запросов, которые считаются устаревшими и практически не используются:

braille (шрифт Брайля);
embossed (принтеры для печати шрифтом Брайля);
projection (проекторы);
tty (фиксированный размер символов на устройстве);
tv (экраны телевизоров);
handheld (смартфоны).

Адаптивная верстка с помощью медиа-запросов CSS3

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

Конструкция медиа-запроса

Все медиа-запросы имеют стандартный синтаксис и состоят из:

@media (вводит медиа-запрос);
одно или несколько условий, разделенных логическими операторами (определяет тип устройств);
параметры.

Рассмотрим синтаксис подробнее.

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

and — выполняются все условия;
or или , (запятая) — выполняется одно из условий медиа-запроса;
not — отрицание условия.

Последней составляющей медиа-запроса будет один или несколько параметров:

Ширина (width) — возможна минимальная или максимальная ширина (min-width / max-width).
Высота (height) — аналогично возможна минимальная (min-height) или максимальная (max-height).
Ориентация страницы (orientation) — как и в обычных документах, она может быть вертикальной (portrait) и горизонтальной (landscape).
Cоотношение ширины и высоты элемента (aspect-ratio) — также может быть минимальной (min-aspect-ratio) и максимальной (max-aspect-ratio). Задается с помощью дроби, например: 16/9. Но учтите, что числа в дроби должны быть целыми.
Определение разрешения экрана, то есть плотность пикселей (resolution). Можно использовать любую из единицу измерения: число точек на дюйм (dpi), на сантиметр (dpcm) или на пиксель (dppx).

Итоговый вариант кода для ширины будет выглядеть так:

Для ориентации страницы:

Для соотношения ширины и высоты:

Для плотности пикселей:

CSS-фреймворки

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

Адаптивная верстка сделает сайт читабельным на любом типе устройств. Число параметров постоянно растет и превращает ее из полезной техники в насущную необходимость. При этом для ее использования не нужно быть продвинутым верстальщиком — здесь справится даже новичок.

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

Читайте также: