Как написать медиа-запрос CSS?

@media screen и (min-width: 1000 пикселей) {}

Это синтаксис медиа-запроса. Это начинается с @СМИ для установки самого Media Query. Затем установите тип носителя, который в данном случае экран. Этот тип относится к экранам настольных компьютеров, планшетам, телефонам и т. Д. Завершите медиа-запрос с помощью медиа-функция. В нашем примере выше это средняя ширина: 1000 пикселей. Это означает, что Media Query срабатывает для дисплеев с минимальной шириной 1000 пикселей.

После этих элементов медиа-запроса добавьте открывающую и закрывающую фигурные скобки, аналогичные тем, которые вы бы сделали в любом обычном правиле CSS.

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

 @media screen и (min-width: 1000px) {body {font-size: 20px; }





instagram viewer

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

Разместите как можно больше Правила CSS в этом медиа-запросе, если это необходимо для настройки внешнего вида вашего веб-сайта. Например, чтобы не только увеличить размер шрифта до 20 пикселей, но и изменить цвет всех абзацев на черный (# 000000), добавьте это: 
@media screen и (min-width: 1000px) {
тело {
размер шрифта: 20 пикселей;
}
п {
цвет: # 000000;
}
}
 Добавление дополнительных медиа-запросов 

Кроме того, вы можете добавить больше медиа-запросов для каждого большего размера, вставив их в свою таблицу стилей следующим образом: 
@media screen и (min-width: 1000px) {
тело {
размер шрифта: 20 пикселей;
}
п {
цвет: # 000000;
{
}
@media screen и (min-width: 1400px) {
тело {
размер шрифта: 24 пикселя;
}
}

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

Обычно есть два способа написать медиа-запросы - используя минимальная ширина или с Максимальная ширина. До сих пор мы видели min-width в действии. Этот подход активирует медиа-запросы после того, как браузер достигнет хотя бы этой минимальной ширины. Итак, запрос, который использует минимальная ширина: 1000 пикселей применяется, если ширина браузера не менее 1000 пикселей. Этот стиль медиа-запросов используется, когда вы создаете сайт в первую очередь для мобильных устройств. 

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

Цитируйте эту статью.