Как вы пишете CSS медиа-запрос?

Адаптивный веб-дизайн — это подход к созданию веб-страниц, при котором эти страницы могут динамически изменять свой макет и внешний вид в зависимости от размера экрана посетителя. Большие экраны могут принимать макет, подходящий для этих больших дисплеев, в то время как меньшие устройства, такие как мобильные телефоны, могут получать тот же веб-сайт, отформатированный таким образом, который подходит для этого меньшего экрана. Этот подход обеспечивает лучший пользовательский опыт для всех пользователей и может даже помочь улучшить рейтинг в поисковых системах. Важной частью адаптивного веб-дизайна являются CSS Media Queries.

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

Медиа-запросы в действии

Итак, как вы используете медиа-запросы на веб-сайте? Вот очень простой пример:

1. Вы бы начали с хорошо структурированного HTML-документа без каких-либо визуальных стилей (для этого и нужен CSS)
2. В своем CSS-файле вы начнете, как обычно, со стилизации страницы и установки базовой линии того, как будет выглядеть веб-сайт. Скажем, вы хотите, чтобы размер шрифта страницы составлял 16 пикселей, вы можете написать этот CSS:

    body {font-size: 16px; } 

3. Теперь вы можете увеличить размер шрифта для больших экранов, на которых достаточно ресурсов. Это где Media Queries сработает. Вы бы начали Media Query следующим образом:

    экран @media и (минимальная ширина: 1000 пикселей) {}

4. Это синтаксис медиазапроса. Он начинается с @media, чтобы установить сам медиазапрос. Затем вы устанавливаете «тип носителя», который в данном случае является «экраном». Это относится к экранам настольных компьютеров, планшетам, телефонам и т. Д. Наконец, вы завершаете медиазапрос с помощью «функции мультимедиа». В нашем примере выше это «средняя ширина: 1000 пикселей». Это означает, что Media Query включится для дисплеев с шириной не менее 1000 пикселей.
5. После этих элементов Media Query вы добавляете открывающую и закрывающую фигурные скобки, аналогичные тем, которые вы делаете в любом обычном правиле CSS.

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

    экран @media и (min-width: 1000px) {body {font-size: 20px; } 

2. Когда выполняются условия медиазапроса (ширина окна браузера не менее 1000 пикселей), этот стиль CSS вступает в силу, изменяя размер шрифта нашего сайта с 16 пикселей, которые мы изначально установили, до нашего нового значения 20 пикселей.

Добавление большего количества стилей

Вы можете разместить столько CSS-правил в этом медиа-запросе, сколько необходимо для настройки внешнего вида вашего сайта. Например, если вы хотите не только увеличить размер шрифта до 20 пикселей, но и изменить цвет всех абзацев на черный (# 000000), вы можете добавить это:

 экран @media и (минимальная ширина: 1000 пикселей) {
 тело {
 размер шрифта: 20 пикселей;
 }
 
 п {
 цвет: # 000000;
 }
 }
 

Добавление большего количества медиазапросов

Кроме того, вы можете добавить больше медиазапросов для каждого большего размера, добавив их в таблицу стилей следующим образом:

 экран @media и (минимальная ширина: 1000 пикселей) {
 тело {
 размер шрифта: 20 пикселей;
 }
 
 п {
 цвет: # 000000;
 {
 }
 
 экран @media и (минимальная ширина: 1400 пикселей) {
 тело {
 размер шрифта: 24 пикселя;
 }
 }
 

Первые медиазапросы будут иметь ширину 1000 пикселей, изменяя размер шрифта до 20 пикселей. Затем, когда размер браузера превысил 1400 пикселей, размер шрифта снова изменится до 24 пикселей. Вы можете добавить столько медиазапросов, сколько необходимо для вашего конкретного сайта.

Минимальная ширина и максимальная ширина

Как правило, есть два способа написания медиазапросов — с помощью «min-width» или «max-width». До сих пор мы видели «минимальную ширину» в действии. Это заставляет медиазапросы вступать в силу, когда браузер достигнет хотя бы этой минимальной ширины. Таким образом, запрос, использующий «min-width: 1000px», будет применяться, когда ширина браузера не менее 1000 пикселей. Этот стиль Media Query используется, когда вы создаете сайт «мобильным» способом.

Если вы используете «max-width», это работает противоположным образом. Медиа-запрос «max-width: 1000px» будет применяться, когда браузер упадет ниже этого размера.

Относительно старых браузеров 

Одной из проблем с Media Queries является отсутствие поддержки в более старых версиях Internet Explorer. К счастью, есть доступные полифиллы, которые могут исправлять поддержку медиазапросов в этих старых браузерах, что позволяет вам использовать их на веб-сайтах сегодня, при этом гарантируя, что отображение этого сайта не выглядит испорченным в старых браузерных программах.

Отредактированный Джереми Жираром 24.01.17