Медиа-запросы
Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.
Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.
Синтаксис
Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Смартфоны и аналогичные им аппараты. |
| Принтеры и другие печатающие устройства. | |
| projection | Проекторы. |
| screen | Экран монитора. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Логические операторы, применяемые в медиа-запросах
and
Логическое И. Указывается для объединения нескольких условий.
Пример. Стиль для всех цветных устройств
@media all and (color)
not
Логическое НЕ. Указывается для отрицания условия.
Пример. Стиль для всех устройств кроме смартфонов
@media all and (not handheld)
Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение
@media not all and (color)
следует понимать как
@media not (all and (color))
@media (not all) and (color)
only
Применяется для старых браузеров, которые не поддерживают медиа-запросы.
Пример. Стиль для новых браузеров
@media only all and (not handheld)
В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.
Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.
@media all and (orientation: landscape), all and (min-width: 480px)
Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.
Медиа-функции
Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.
Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px , наоборот, сообщает, что ширина окна больше 1000 пикселов.
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число
Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).
color (min-color, max-color)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2 3 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.
Пример 1. Стиль для цветных устройств
@media screen and (color) < /* Для цветных экранов */ body < background: #fc0; >> @media screen and (min-color:3) < /* Минимум 512 цветов */ body < background: #ccc; >>color-index (min-color-index, max-color-index)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.
Пример 2. Цветной дисплей
@media all and (min-color-index: 256)
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число
Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.
Пример 3. «Киношное» соотношение
@media screen and (min-device-aspect-ratio: 16/9)
device-height (min-device-height, max-device-height)
Тип носителя: все кроме speech
Значение: размер
Определяет всю доступную высоту экрана устройства или печатной страницы.
device-width (min-device-width, max-device-width)
Тип носителя: все кроме speech
Значение: размер
Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.
Пример 4. Ширина макета
HTML5 CSS3 IE Cr Op Sa Fx
Ширина макета Диабаз, формируя аномальные геохимические ряды, сменяет известняк, образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов. grid
Тип носителя: all
Значение: нет
Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.
Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).
Пример 5. Размер букв
HTML5 CSS3 IE Cr Op Sa Fx
Стиль для бабушкофона Привет! Как дела? Как сажа бела?
height (min-height, max-height)
Тип носителя: все кроме speech
Значение: размер
Высота отображаемой области.
monochrome (min-monochrome, max-monochrome)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.
Пример 6. Стиль для принтера
@media print and (monochrome) < body < font-family: Times, 'Times New Roman', serif; >
h1, h2, p < color: black; >> @media print and (color) < body < font-family: Arial, Verdana, sans-serif; >
h1, h2, p < color: #556b2f; >>orientation
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait
Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).
В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).
Пример 7. Использование ориентации устройства
@media screen and (orientation: landscape) < #logo < background: url(logo1.png) no-repeat; >> @media screen and (orientation: portrait) < #logo < background: url(logo2.png) no-repeat; >>resolution (min-resolution, max-resolution)
Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)
Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.
Пример 8. Разрешение принтера
@media print and (min-resolution: 300dpi)
scan
Тип носителя: tv
Значение: interlace | progressive
Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.
width (min-width, max-width)
Тип носителя: все кроме speech
Значение: размер
Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.
Пример 9. Использование max-width
HTML5 CSS3 IE Cr Op Sa Fx
Ширина страницы Пока магма остается в камере, мусковит сингонально поднимает шток, в то время как значения максимумов изменяются в широких пределах.
CSS: Медиа запросы
Для просмотра интернет-страниц используется множество устройств с различным размером и разрешением экрана: компьютеры, смартфоны, планшеты, ноутбуки и так далее. Такое количество устройств требует от разработчиков умения подстраивать свои страницы под разные вариации разрешений.
Один из способов изменить стили в зависимости от разрешения — использование специальных CSS правил, которые срабатывают при выполнении заданных условий. Такими условиями могут быть:
- Ширина или высота viewport
- Горизонтальная или вертикальная ориентация экрана
- Тип устройства
В этом уроке узнаем о правиле @media и рассмотрим несколько стандартных вариантов применения. Задачей урока не является объяснить все тонкости работы с адаптивностью страниц, поэтому сосредоточимся на ключевых вещах.
Правило media
Все медиа запросы строятся по похожему шаблону и используют конструкцию @media :
@media (условие) < /* Правила */ >Какие правила указываются внутри конструкции @media ? Абсолютно любые! Думайте об этом, как о новом CSS файле, со своими селекторами, свойствами. Например, для определённого условия нужно изменить цвет текста элементов с классом .text на чёрный. Тогда конструкция примет такой образ:
@media (условие) < .text < color: #000000; >> А какие бывают условия? Представим, что нужно изменить цвет текста, если ширина viewport меньше или равно 700 пикселей. Тогда указывается правило max-width: 700px . Очень похоже на обычное CSS правило, которое определит, что свойства должны отрабатывать, если ширина viewport 700 пикселей или меньше:
@media (max-width: 700px) < .text < color: #000000; >> С приходом мобильных телефонов остро возникла необходимость работы с тем, как пользователь держит телефон: вертикально или горизонтально. Когда пользователь держит телефон вертикально, то высота экрана больше, чем его ширина. При горизонтальном использовании наоборот — ширина больше высоты. Это требует правильного выстраивания блоков на странице, чтобы ей было удобно пользоваться из любого положения.
В медиа запросах есть специальное условие orientation , которое может иметь одно из двух значений:
- portrait — портретная ориентация устройства. Высота экрана больше, чем его ширина
- landscape — альбомная ориентация устройства. Высота экрана меньше, чем его ширина
Пусть для портретной ориентации текст будет белым, а для альбомной чёрным:
@media (orientation: portrait) < .text < color: #ffffff; >> @media (orientation: landscape) < .text < color: #000000; >> Медиа запросы могут быть куда сложнее, и учитывать множество разных вариаций. В рамках одного урока это не описать, но вы уже познакомились с тем, как строятся медиа запросы, для чего они существуют и как добавить их в свой CSS файл
Задание
Добавьте белый цвет текста у параграфов с классом white-text-mobile для устройств с шириной экрана не больше 750 пикселей. Стили запишите в теге
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Понимание медиа-запросов CSS
В этой статье я расскажу о том, как лучше всего использовать CSS медиа-запросы для достижения отзывчивости сайта.
Когда вы слышите об отзывчивом веб-дизайне, что первое приходит вам на ум? Значит ли это, что сайт должен быть функциональным? Конечно, нет, это может звучать именно так для людей, только начавших свой путь в веб-разработке, но отзывчивость сайта не имеет ничего общего с его функциональностью.
Когда мы говорим об отзывчивости, мы имеем в виду то, насколько сайт масштабируется на различных устройствах. Сегодня люди используют различные виды устройств для просмотра контента в Интернете; это могут быть мобильные устройства, iPad, планшеты или даже часы. И очень важной задачей веб-разработчика является обеспечение правильного отображения веб-приложения независимо от того, с какого устройства оно просматривается.
Создание веб-сайта, не учитывающего различные устройства пользователей, является плохой практикой и приводит к негативному пользовательскому опыту. В свою очередь, пользователи могут никогда не вернуться на такой сайт, что в конечном итоге приведёт к ухудшению SEO для этого сайта.
Чтобы создать отзывчивый сайт, вам нужен инструмент. Медиа-запросы — это инструменты, используемые для переопределения определённых частей глобальных кодов CSS, что в конечном итоге приводит к отзывчивости сайта. Медиа-запросы позволяют разработчикам стилизовать CSS в зависимости от типа устройства или разрешения экрана.
В этой статье я расскажу о том, как лучше всего использовать медиа-запросы для достижения отзывчивости сайта. Прежде чем мы продолжим, давайте рассмотрим несколько ключевых слов, которые необходимо понимать при работе с медиа-запросами.
Медиа-тип: относится к типу устройства, на котором будет отображаться сайт, включая print , screen , speech или all . По умолчанию тип медиа всегда имеет значение all , если не указано иное; это означает, что любые стили, используемые в медиа-запросах, будут применяться для печати, экрана или воспроизведения речи.
- Медиа-тип print относится к веб-сайтам, которые будут напечатаны в журналах или газетах.
- Медиа-тип speech относится к веб-сайтам, для которых требуются программы чтения с экрана для людей с ослабленным зрением.
- Медиа-тип screen предназначен для веб-сайтов, которые мы можем видеть на экранах наших устройств, таких как ноутбуки и мобильные телефоны. В этой статье я сосредоточусь на медиа-типе screen , наиболее актуальном для разработчиков и новичков.
Точка прерывания: Это относится к пиксельным значениям (например, 500px ), определённым в CSS, чтобы сообщить разработчику, в какой момент стили должны быть включены в медиа-запрос, который мы применили.
Свойство: Это свойство сайта, которое можно изменить с помощью медиа-запросов. К таким свойствам относятся ширина, цвет, ориентация и т.д.
Значение: Обозначает то, для чего используется функция медиа-запроса.
Ниже приведён наиболее распространённый синтаксис медиа-запроса, используемый вами как разработчиком, чтобы сделать ваш сайт отзывчивым.
@media media-type and (feature:value)
/*styles*/
>
@media screen and (min-width:1080px)
h1
background-color: yellow;
>
>Выбор точек прерывания при переходе от больших экранов к маленьким
Некоторые разработчики предпочитают создавать сайт desktop-first . Если вы создаёте сайт desktop-first , естественно, что вы захотите уменьшить его масштаб до размера самого маленького устройства — мобильного телефона.
Для больших размеров экрана лучше всего использовать max-width для медиа-функции и начинать от большего к меньшему (в порядке убывания размеров экрана).
Причина, по которой вы хотите начать от самого большого размера к самому маленькому, заключается в том, что вам не придётся повторять медиа-запросы. Давайте рассмотрим примеры ниже.
У вас есть div с фоновым цветом красного цвета на экране настольного компьютера. Ваша цель — сделать цвет фона этого div зелёным на планшетной версии и жёлтым на мобильной. Если вы начнёте писать от меньшего размера экрана до самого большого, то единственное изменение цвета мы увидим на экране планшета, где цвет фона станет зелёным; изменения на маленьком экране не будут применены. Давайте посмотрим это на практике
body>
div class="box-1">div>
body>.box-1
width:200px;
height:200px;
background-color: red;
>
/*MOBILE SCREEN */
@media screen and (max-width:369px)
.box-1
background-color: yellow;
>
>
/*TABLET SCREEN*/
@media screen and (max-width:800px)
.box-1
background-color: green;
>
>max-width для экрана планшета выше означает, что стили будут применяться только к экранам размером от 800px и ниже, а max-width для мобильного устройства означает, что стили будут применяться только к экранам размером от 369px и ниже. Сейчас это является плохой практикой, поскольку мы начинаем desktop-first , но пишем наши медиа-запросы в порядке возрастания. В результате этого кода цвет фона для div будет меняться на экране планшета, но не будет меняться на экране мобильного устройства, как мы хотим.
На изображении выше показан размер экрана настольного компьютера с глобальным CSS, где div имеет красный цвет фона. На изображении ниже показан размер экрана в режиме планшета при 800px , и ниже цвет фона меняется на зелёный.
Но обратите внимание, что на 350px , где должны быть применены стили мобильного экрана, а цвет фона должен измениться на жёлтый, к сожалению, этот стиль не может быть добавлен.
Поскольку мы расположили медиа-запросы в порядке возрастания, приоритет имеют стили медиа-запроса с наибольшей шириной экрана.
Переупорядочив медиа-запросы и убедившись, что при разработке desktop-first нужно начинать писать медиа-запросы в порядке убывания, от большего к меньшему размеру экрана.
Основываясь на текущей статистике разрешений экранов от statcounter, это значительные точки прерывания, которые вы должны использовать в своём следующем проекте веб-разработки, если вы собираетесь развивать desktop-first ;
- Большой экран ( max-width: 1080px )
- Экран планшета ( max-width: 768px )
- Мобильный экран ( max-width: 360px )
Вы можете проверить свои медиа-запросы между двумя значениями, это означает, что вы будете устанавливать стили CSS только между двумя размерами экрана, как показано ниже;
- Большой экран: @media screen and (min-width:769px) and max-width(1080px) .
- Экран планшета: @media screen and (min-width:481px) and (max-width:768px) .
- Мобильный экран: @media screen and (min-width:360px) and (max-width:480px) .
Но с введением спецификации Level CSS media query, медиа-запросы, написанные выше, могут быть записаны в более краткой и полной форме, используя ключевое слово «width», отбросив «max» и «min», как показано ниже:
/* без диапазонов*/
@media screen and (width )
/* код */
>
@media screen and (width )
/* код */
>
@media screen and (width )
/* код */
>Приведённый выше формат упрощает использование max-width , поскольку он просто означает, что стили в этих медиа-запросах будут работать для размеров экрана, меньших или равных любому из указанных выше значений ( 1080px , 768px или 360px ). Стили в приведённых выше медиа-запросах не будут работать для размеров экрана, превышающих указанные выше значения.
/* В диапазоне */
@media screen and (width >= 769px) and (width )
/* код */
>Приведённый выше медиа-запрос будет работать для размеров экрана больше или равно 769px и меньше или равно 1080px , что совпадает с предыдущим подходом min-max .
Более того, приведённый выше код может быть модифицирован таким образом:
@media screen and ( 769px )
/* код */
>Выбор точек прерывания от маленького до большого экрана
Предыдущий раздел был посвящён разработчикам, предпочитающим использовать подход, ориентированный на desktop-first . В этом разделе речь пойдёт о разработчиках, предпочитающих использовать подход mobile-first и в конечном итоге масштабируют свои сайты, чтобы они идеально помещались на экране настольного компьютера.
При написании медиа-запросов для подхода mobile-first следует помнить, что вы движетесь по лестнице, а значит, ваши медиа-запросы будут расположены в порядке возрастания, то есть вы будете масштабироваться от меньших размеров экрана к большим. Вместо того чтобы использовать max-width , вы будете использовать min-width . min-width в данном случае означает, что стили будут влиять на размеры экрана только при min-width и выше.
Исходя из текущей статистики разрешений экранов от statcounter, это значительные точки прерывания, которые вы должны использовать в своём следующем проекте веб-разработки, если вы планируете развивать mobile-first ;
- Экран мини-планшета ( min-width: 480px )
- Экран планшета ( min-width: 800px )
- Экран настольного компьютера ( min-width: 1080px )
Как говорилось выше в этой статье, используя спецификации CSS уровня 4 для написания медиа-запросов, точки прерывания могут быть написаны таким образом:
@media screen and (width >= 480px)
/* код */
>
@media screen and (width >= 800px)
/* код */
>
@media screen and (width >= 1080px)
/* код */
>Преимущество написания медиа-запросов типа Range
Из приведённых выше примеров вы наверняка заметили, что значения медиа-запросов могут быть записаны с одной точкой останова, а также могут быть записаны в диапазоне между двумя точками останова.
В конечном итоге вы могли бы остановиться на написании медиа-запросов по своему усмотрению, но написание медиа-запросов в диапазоне даёт нам ключевое преимущество.
Заметили, что вам нужно помнить о порядке, в котором вы записываете точки прерывания медиа-запросов?
- При разработке для desktop-first необходимо писать медиа-запросы в порядке убывания
- При разработке для mobile-first медиа-запросы следует писать в порядке возрастания.
Даже если вы успешно расположили медиа-запросы в правильном порядке, в итоге у вас получаются стили, не предназначенные для конкретных размеров экрана. Например, вам может понадобиться другая функция для сайта на экранах размером от 468px до 768px . Вы ни в коем случае не хотите, чтобы эта функция была унаследована экранами гораздо меньшего размера, скажем, 360px и ниже. В подобной ситуации, если вы создаёте сайт для desktop-first , обязательно будут унаследованы стили в разных точках разрыва.
Метод диапазона для написания медиа-запросов помогает исправить это, он помогает разработчикам быть более конкретными, и устраняет необходимость в нисходящем и восходящем упорядочивании медиа-запросов, потому что разработчик знает диапазон размеров экрана, на который он хочет конкретно ориентироваться.
Поэтому метод написания медиа-запросов по диапазону в сочетании с новой спецификацией медиа-запросов уровня 4 является более удобным и всеобъемлющим способом написания медиа-запросов для вашего проекта, как написано ниже:
@media screen and (360px )
/* код */
>
@media screen and (480 < width )
/* код */
>
@media screen and ( 768px < width )
/* код */
>Обстоятельное введение в новую спецификацию CSS Level 4 media query можно найти в документации MDN.
Альтернативы медиа-запросам
Это не означает, что разработчики никогда не должны использовать медиа-запросы, но лучшая практика требует, чтобы вы использовали как можно меньше медиа-запросов в своём проекте.
С тех пор как в CSS появился flexbox , можно сделать макеты отзывчивыми без написания медиа-запросов, используя:
.container
flex-wrap: wrap;
>Это свойство flexbox автоматически делает ваши макеты отзывчивыми, когда размер экрана перестаёт устраивать.
С появлением таких CSS-фреймворков, как Tailwind, написание многих медиа-запросов сократилось. Все полезные классы Tailwind могут применяться условно в различных точках прерывания, что упрощает создание сложных отзывчивых интерфейсов.
Более того, использование относительных единиц CSS, таких, как em , rem и % , а не абсолютных, таких как пиксели ( px ), также позволяет легко сделать ваш сайт отзывчивым, сократив при этом количество стилей, изменяемых в медиа-запросах.
Заключение
Создание полностью отзывчивого веб-сайта не происходит в одно мгновение. Чтобы создавать отзывчивые веб-сайты как профессионал, требуется время и терпение. Возможно, у вас не получится с первой попытки, но при постоянной практике и применении описанных выше методов вы сможете создавать отзывчивые сайты в кратчайшие сроки.
Медиа-запросы CSS
Такое понятие, как медиа-запросы, появилось в CSS3. С их помощью можно определять внешний вид веб-страниц, опираясь на ширину и высоту окна браузера. Благодаря медиа-запросам вы можете параллельно создавать стили для небольших мобильных телефонов, планшетов, лэптопов и мониторов с большой диагональю.
Идея адаптивного дизайна — предоставить посетителям сайт в наиболее читаемой и привлекательной форме. Дизайн создается под как минимум три целевых экрана: настольный ПК, планшет и смартфон. Но учитывая большое количество вариаций этих девайсов, недостаточно остановиться на какой-то одной ширине для каждого типа устройства. Поэтому важно использовать гибкую сетку и проводить тестирование в процессе разработки, отслеживая то, как подстраивается дизайн сайта под разную ширину браузерного окна.
Когда использовать медиа-запросы?
Как правило, для адаптации дизайна веб-страницы необходимо прописать ряд CSS-стилей для определенных элементов. Ниже мы перечислим наиболее частые сценарии, когда вам понадобится обратиться к медиа-запросам.
- Определение количества колонок. Трехколоночный макет сайта, который шикарно смотрится на настольных ПК, будет совсем неуместен для мобильных телефонов и планшетов. С помощью медиа-запросов можно переопределить количество колонок в макете с учетом ширины экрана устройства, сгруппировав для смартфонов весь контент в одну колонку.
- Относительная ширина. Когда вы устанавливаете фиксированную ширину макета, скажем, в 960 пикселей, это подойдет для настольных компьютеров, лэптопов и некоторых особо крупных планшетов. Однако для мобильного телефона такой размер контейнера слишком большой. Используя медиа-запрос, можно специально для смартфонов создать «резиновый» макет, ширина которого будет не фиксированной, а относительной. Таким образом, контейнер шириной 100% будет легко подстраиваться под любой смартфон в любой ориентации.
- Уменьшение отступов. Большие расстояния между блоками и элементами создают ощущение воздушного, легкого дизайна. Однако отступы, которые хорошо смотрятся на мониторе с диагональю 21-27 дюймов, будут выглядеть абсолютно безобразно на небольшом экране смартфона, к тому же принуждая пользователей больше прокручивать страницу. Медиа-запросы позволяют задать альтернативные размеры отступов для узких дисплеев.
- Регулировка размера шрифта. Заголовки высотой в 60 пикселей могут красиво смотреться на десктопе, но для мобильных устройств такой размер шрифта редко когда уместен, поэтому для узких экранов будет целесообразным установить меньшее значение font-size.
- Адаптивная навигация. Нередко бывает так, что навигационное меню, которое было продумано для десктопной версии сайта, совершенно не подходит для мобильных устройств ввиду своей объемности либо манеры расположения пунктов меню. Существует несколько подходов к реализации удобной навигации для мобильной версии сайта, и медиа-запросы непременно принимают в этом участие.
- Скрытие элементов. Некоторые части веб-страницы могут быть бесполезными либо малозначимыми, если сайт просматривается с мобильного телефона. С помощью свойства display: none и медиа-запросов вы можете скрыть определенные элементы от глаз посетителя, если он зашел на сайт со смартфона. Но имейте в виду, что подобный прием не экономит трафик: скрытые элементы по-прежнему будут загружаться браузером.
Конечно, это далеко не все ситуации, когда применяются медиа-запросы.
Breakpoints (контрольные точки)
При помощи медиа-запросов вы можете создавать так называемые контрольные точки (англ. breakpoints) и привязывать к ним CSS-стили. К примеру, можно определить для браузера следующие правила: «Если ширина экрана составляет больше чем 767 пикселей, к веб-странице применяются эти стили, а если ширина экрана составляет больше чем 991 пиксель, применяются другие стили». Вот эти числа, обозначающие ширину экрана, и называются контрольными точками.
Какую ширину необходимо указывать в контрольных точках? Наиболее простой ответ: ту, на которой верстка веб-страницы начинает ломаться. Представим, что у вас есть сайт с контейнером шириной 1180 пикселей. Тогда в окне шириной 1200 пикселей (учитываем полосу прокрутки) или меньше он, скорее всего, будет выглядеть не очень хорошо. Вот и ваша первая контрольная точка: необходимо внести правки в дизайн, если сайт просматривается в окне шириной менее чем 1200 пикселей.
При создании гибких сеток часто применяется определенный набор медиа-запросов, предусмотренный для трех различных контрольных точек: смартфон, планшет, монитор ПК. Контрольных точек может быть и больше. Например, в Bootstrap 4 используется четыре контрольных точки в одном направлении и еще четыре — в обратном направлении:
/* —————————————— */ /* —— От маленьких экранов к большим —— */ /* —————————————— */ /* Стили для очень маленьких экранов (телефоны в книжной ориентации, дисплей менее 576 пикселей). Записываются без медиа-запросов, поскольку в Bootstrap это значение по умолчанию */ /* Стили для маленьких экранов (телефоны в альбомной ориентации, дисплей 576 пикселей и более) */ @media (min-width: 576px) < . >/* Стили для средних экранов (планшеты, дисплей 768 пикселей и более) */ @media (min-width: 768px) < . >/* Стили для больших экранов (ПК, дисплей 992 пикселей и более) */ @media (min-width: 992px) < . >/* Стили для очень больших экранов (ПК с большим монитором, дисплей 1200 пикселей и более) */ @media (min-width: 1200px) < . >/* —————————————— */ /*—— От больших экранов к маленьким ——*/ /* —————————————— */ /* Стили для очень больших экранов (дисплей 1200 пикселей и более). Записываются без медиа-запросов, так как контрольная точка для очень больших экранов не имеет верхней границы по ширине */ /* Стили для больших экранов (дисплей максимум 1199 пикселей) */ @media (max-width: 1199px) < . >/* Стили для средних экранов (дисплей максимум 991 пикселей) */ @media (max-width: 991px) < . >/* Стили для маленьких экранов (дисплей максимум 767 пикселей) */ @media (max-width: 767px) < . >/* Стили для очень маленьких экранов (дисплей максимум 575 пикселей) */ @media (max-width: 575px)
Кроме этого, в Bootstrap задействуются еще несколько вариаций контрольных точек для записи стилей под конкретный диапазон ширины экранов. При этом используются сразу оба условия — для минимума и для максимума:
/* Стили для очень маленьких экранов (дисплей максимум 575 пикселей) */ @media (max-width: 575px) < . >/* Стили для маленьких экранов (дисплей шириной от 576 пикселей до 767 пикселей) */ @media (min-width: 576px) and (max-width: 767px) < . >/* Стили для средних экранов (дисплей шириной от 768 пикселей до 991 пикселей) */ @media (min-width: 768px) and (max-width: 991px) < . >/* Стили для больших экранов (дисплей шириной от 992 пикселей до 1199 пикселей) */ @media (min-width: 992px) and (max-width: 1199px) < . >/* Стили для очень больших экранов (дисплей минимум 1200 пикселей) */ @media (min-width: 1200px)
Mobile First или Desktop First?
Когда вы пишете стили для контрольных точек, вы не создаете весь дизайн с нуля, а лишь корректируете существующую верстку. Возникает вопрос, под что верстать изначально: под настольные компьютеры с последующей корректировкой под мобильные устройства или же наоборот — сначала создать версию для небольших экранов, а затем расширить ее? Рассмотрим оба подхода.
- Desktop First. При этом подходе вы сначала полностью верстаете дизайн для больших экранов, без использования медиа-запросов. После этого, используя контрольные точки в медиа-запросах, корректируете дизайн под средние и маленькие экраны (уменьшаете шрифт, перестраиваете макет, скрываете второстепенные элементы и т. п.). Преимущество такой верстки заключается в том, что старые браузеры (к примеру, Internet Explorer 8), которые не знают, что такое медиа-запросы, смогут отобразить ваш сайт, поскольку это исходный дизайн, который вы писали без использования директивы @media .
- Mobile First. Если вы выбираете данный подход, то сначала верстаете дизайн для самых маленьких экранов, не используя медиа-запросы. После этого, создавая контрольные точки, вы корректируете верстку под все более и более широкие экраны.
Оба подхода подразумевают сначала создание определенного базового набора стилей, актуальных для любой версии сайта (например, цвет ссылок, размер основного шрифта и др.), а затем написание тех стилей, которые будут отличаться для различных экранов.
Синтаксис медиа-запросов
Чтобы добавить медиа-запрос в таблицу стилей, запишите следующее:
@media (min-width: 576px) < /* здесь будут CSS-стили */ >
Внутрь скобок медиа-запроса поместите стили CSS, как вы делаете это обычно:
@media (min-width: 576px) < .column < width: 100%; >h1 < font-size: 24px; >/* и так далее. */ >
Желательно размещать все медиа-запросы под обычными стилями, а не над ними. Если вы используете контрольные точки, отталкиваясь от минимальной ширины экрана ( min-width ), размещайте их в порядке возрастания ширины экрана. Если вы применяете max-width , тогда расположите медиа-запросы в порядке уменьшения ширины. В противном случае одни медиа-запросы будут перезатирать предыдущие.
Далее в учебнике: принцип создания гибкой сетки в CSS.