Сегодня, в эпоху мобильного Интернета, важно создавать сайты, которые являются адаптивными.
Посетителю должно быть комфортно просматривать сайт на любом устройстве. Верстальщик сталкивается сегодня с необходимостью не только подогнать верстку под разные размеры экрана, но и адаптировать ее для новых дисплеев с высоким разрешением.
Для создания адаптивной верстки необходимо знание медиа-запросов.
Медиа-запросы были представлены в спецификации 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)
Вышеуказанный запрос будет применим только к дисплеям со стандартной плотностью.
Если Вы хотите охватить максимальное количество посетителей, позаботьтесь о качественной адаптивной верстке своего сайта, его красивом дизайне и поддержке современных дисплеев с высоким разрешением. Медиа-запросы не сложны в изучении и обязательны для использования в современной адаптивной верстке.
