Адаптивная верстка: знакомство с медиазапросами

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

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

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

Для создания адаптивной верстки необходимо знание медиазапросов.

Медиазапросы были представлены в спецификации CSS2 и поддерживаются всеми современными браузерами: Internet Explorer 10-11, Edge, Chrome, Opera и Opera Mini, Safari, Mozilla Firefox, Android.

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

meta name="viewport" content="width=device-width, initial-scale=1.0"

Этот код запретит масштабирование контента. А ширина страницы станет равной размеру устройства, на котором происходит просмотр. Теперь можно писать медиазапросы.

Требования:

meta name="viewport" content="width=device-width, initial-scale=1.0"
  • Отсутствие полосы горизонтальной прокрутки в независимости от ширины экрана
  • Отличное отображение сайта не только на компьютерном экране, но и на разнообразных мобильных смартфонах, планшетах и ноутбуках
  • Четкое отображение контента в независимости от разрешения экрана

Для создания адаптивной верстки необходимо знание медиазапросов.

Применение:

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

Синтаксис

Медиазапросы пишутся в отдельном файле CSS либо непосредственно в секции. Разумеется, предпочтителен первый вариант. Инлайновое внедрение не поддерживается, то есть Вы не можете размещать запросы непосредственно в тегах HTML.

Все медиазапросы начинаются с правила @media, за которым в круглых скобках следует условие. Лучше всего посмотреть это на примере. Давайте зададим для всех устройств, у которых ширина экрана меньше либо равна 400px, маленький размер шрифта:

@media (max-width: 400px) { body { font-size: 12px; } }

Типы устройств

Есть возможность задавать конкретные медиазапросы в зависимости от устройства. Рассмотрим их:

  • Все устройства (all)
  • Принтеры (print)
  • Экран (screen). Имеется ввиду экран компьютера, ноутбука, планшета, смартфона
  • Устройства, использующие программы чтения с экрана (speech)

Для задания типа устройства достаточно указать в медиазапросе соответствующее ключевое слово, вот так:

@media screen and (min-width: 375px) { p { color: green; } }

Здесь мы задаем зеленый цвет тексту на всех экранах, начиная с 375 пикселей. Соответственно, если мы хотим сделать это же для всех устройств, включая вывод на печать, достаточно указать ключевое слово all.

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

  • Речевые и звуковые синтезаторы (aural)
  • Устройства для чтения слепыми людьми (braille)
  • Принтеры для слепых людей (embossed)
  • Смартфоны (handheld)
  • Проекторы (projection)
  • Телетайпы, терминалы и другие устройства с фиксированным размером (tty)
  • Телевизоры (tv)

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

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

  • Объединение нескольких условий: логическое И
    Запрос применится ко всем возможным устройствам, чья ширина экрана не превышает 600 пикселей.
    @media all and (max-width: 600px)
  • Отрицание условия: логическое НЕ
    Запрос применится ко всем устройствам, кроме принтеров:
    @media all and (not print)
  • Роль логического ИЛИ выполняет запятая. Если хотя бы одно из перечисленных условий выполняется, запрос будет применен. Следующий запрос применится ко всем устройствам, находящимся в портретном режиме, либо устройствам, чья ширина не превысит 600 пикселей:
    @media all and (orientation: portrait), all and (max-width: 600px)

Ориентация устройства

  • Альбомный режим (landscape). Ширина устройства превышает его высоту.
    @media screen and (orientation: landscape) { p { color: red; } }
  • Портретный режим (portrait). Высота устройства больше ширины.
    @media screen and (orientation: portrait) { p { color: orange; } }

Размеры устройства

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

В чем различия между экраном устройства и областью просмотра? Экран устройства – это фиксированный размер (физический размер экрана компьютера, телефона), а область просмотра меняются в зависимости от изменения размеров окна браузера.

Есть возможность задать ширину области просмотра:

  • минимальная
    (min-width)
  • конкретная
    (width)
  • максимальная
    (max-width)

То же самое касается высоты: минимальная

(min-height)
, конкретная
(height)

и максимальная

(max-height)

Специальные запросы для определения ширины устройства включают максимальную

(max-device-width)

и минимальную ширину. ⁠

(min-device-width)

Минимальная и максимальная высота экрана устройства – соответственно

(min-device-height)

и

(max-device-height)

Следует отметить, что на сегодняшний день ключевые слова

device-height

и

device-width

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

Разрешение

Apple выпускает устройства с высокой плотностью пикселей, позволяющие показывать изображения более качественными, яркими и четкими. Такие дисплеи называются «Ретина».

Улучшение качества изображения достигается за счет увеличения количества пикселей, там, где обычный дисплей покажет 1 пиксель, Ретина уместит 2.

Соответственно, существуют запросы, позволяющие определить плотность пикселей на экране:

@media (min -device-pixel-ratio: 2)

Данный запрос применится для дисплеев с двойной плотностью пикселей. Этого свойства нет в стандарте CSS, но его понимают все основные браузеры. А следующий запрос стандартизирован и охватит все дисплеи с двойной плотностью пикселей:

@media screen and (min-resolution: 2dppx)

Для максимальной плотности существует аналогичный запрос:

@media screen and (max-resolution: 1dppx)

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

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


Назад