Адаптивный веб-дизайн — это подход к созданию веб-страниц, при котором эти страницы могут динамически изменять свой макет и внешний вид в зависимости от размера экрана посетителя . Большие экраны получают макет, подходящий для этих больших дисплеев, в то время как меньшие устройства, такие как мобильные телефоны, получают тот же веб-сайт, отформатированный таким образом, который подходит для этого меньшего экрана. Такой подход обеспечивает лучший пользовательский опыт для всех пользователей и даже может помочь повысить рейтинг в поисковых системах . CSS Media Queries составляют важную часть адаптивного веб-дизайна.
Медиа-запросы похожи на небольшие условные операторы внутри CSS-файла вашего сайта, позволяя вам устанавливать определенные правила CSS, которые вступят в силу только после того, как будет выполнено определенное условие, например, когда размер экрана выше или ниже определенных пороговых значений.
Медиа-запросы теперь являются стандартными, но очень старые версии Internet Explorer их не поддерживают.
Медиа-запросы в действии
Начните с хорошо структурированного документа HTML без каких-либо визуальных стилей.
В своем CSS-файле стилизуйте страницу и установите базовый уровень того, как будет выглядеть веб-сайт. Чтобы отобразить размер шрифта страницы в 16 пикселей, напишите этот CSS :
body {font-size: 16px; }
Чтобы увеличить этот размер шрифта для больших экранов, на которых достаточно ресурсов, запустите медиазапрос, например:
экран @media и (минимальная ширина: 1000 пикселей) {}
Это синтаксис медиазапроса. Начинается с @media, чтобы установить Media Query. Затем установите тип носителя, который в данном случае является экраном . Этот тип применяется к экранам настольных компьютеров, планшетам, телефонам и т. Д. Завершите медиазапрос функцией мультимедиа . В нашем примере выше это средняя ширина: 1000 пикселей . Это означает, что Media Query включается для дисплеев с минимальной шириной 1000 пикселей в ширину.
После этих элементов Media Query добавьте открывающую и закрывающую фигурную скобку, аналогичную той, которую вы делали бы в любом обычном правиле CSS.
Последний шаг к медиазапросу — добавить правила CSS, которые будут применяться после выполнения этого условия. Вставьте эти правила CSS между фигурными скобками, которые составляют медиазапрос, например:
@ media screen и (min-width: 1000px) {body {font-size: 20px; }
Когда выполняются условия медиазапроса (окно браузера имеет ширину не менее 1000 пикселей), этот стиль CSS вступает в силу, изменяя размер шрифта нашего сайта с 16 пикселей, которые мы изначально установили, до нашего нового значения 20 пикселей.
Добавление большего количества стилей
Поместите столько CSS-правил в этот медиа-запрос, сколько необходимо для настройки внешнего вида вашего сайта. Например, чтобы не только увеличить размер шрифта до 20 пикселей, но и изменить цвет всех абзацев на черный (# 000000), добавьте следующее:
@ media screen и (min-width: 1000px) {
body {
font-size: 20px;
}
p {
color: # 000000;
}
}
Добавление большего количества медиазапросов
Кроме того, вы можете добавить больше медиазапросов для каждого большего размера, вставляя их в таблицу стилей следующим образом:
@ media screen и (min-width: 1000px) {
body {
font-size: 20px;
}
p {
color: # 000000;
{
}
экран @media и (min-width: 1400px) {
body {
font-size: 24px;
}
}
Первые Media Queries появляются с шириной 1000 пикселей, изменяя размер шрифта до 20 пикселей. Затем, когда размер браузера превысил 1400 пикселей, размер шрифта снова изменится до 24 пикселей. Добавьте столько медиазапросов, сколько необходимо для вашего конкретного сайта.
Минимальная ширина и максимальная ширина
Как правило, есть два способа написания медиазапросов — с помощью min-width или max-width . До сих пор мы видели минимальную ширину в действии. Этот подход активирует медиазапросы после того, как браузер достигнет хотя бы этой минимальной ширины. Таким образом, запрос, использующий min-width: 1000px, применяется, когда ширина браузера не менее 1000 пикселей. Этот стиль Media Query используется, когда вы создаете сайт мобильным способом.
Если вы используете максимальную ширину , это работает противоположным образом. Медиа-запрос «max-width: 1000px» применяется после того, как браузер упал ниже этого размера.