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

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

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

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

Пример

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

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

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

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

Метатег viewport

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

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

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

Пример
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Основные свойства метатега <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
Телевизоры.

Логические операторы

and
Логическое И. Указывается для объединения нескольких условий.
not
Логическое НЕ. Указывается для отрицания условия. Оператор not оценивается в запросе последним.
only
Ключевое слово для старых браузеров, не поддерживающих медиа-запросы и считающих only типом носителя. Но так как такого типа не существует, то весь стиль целиком игнорируется. Современные браузеры воспринимают медиа-запрос с only и без only одинаково.
,
Логическое ИЛИ. Перечисление нескольких условий через запятую означает, что если хотя бы одно условие выполняется, то стиль будет применён.

Основные медиа-функции

width (min-width, max-width)
Ширина окна браузера.
device-width (min-device-width, max-device-width)
Ширина экрана устройства.
height (min-height, max-height)
Высота окна браузера.
device-height (min-device-height, max-device-height)
Высота экрана устройства.
orientation
Ориентация устройства. Принимает значения portrait (портретная), если ширина меньше высоты или landscape (альбомная), если ширина больше высоты.
Пример

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

h1 {
    font-size: 72px;
}

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

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

Новые единицы размеров (vw, vh, rem)

vw
1% от ширины окна браузера (viewport).
vh
1% от высоты окна браузера (viewport).

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

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

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

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

Flexbox

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

Спецификация 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

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

Flexbox

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

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

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

  1. Таблица с горизонтальной прокруткой. Самый простой метод. Надо задать для ячеек таблицы white-space: nowrap; и поместить таблицу в блок с overflow-x: scroll.
  2. Таблица с невидимыми столбцами. Суть метода заключается в том, что на экране с маленькой шириной скрываются менее важные столбцы.
  3. Перевернутая таблица. Таблица транспонируется, т.е. столбцы превращаются с строки за счет применения
    display: inline-block
    Таким образом, <thead> таблицы становится первым столбцом, а для <tbody> используется
    {overflow-x: auto; white-space: nowrap;}
  4. Больше не таблица. Заголовок столбца с помощью data-атрибутов ставится слева от содержания ячейки.
  5. Адаптивная таблица. Заголовок столбца с помощью data-атрибутов ставится над содержанием ячейки.

Читать дальше: @media screen для мобильных устройств


.