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

Знать синтаксис медиа-запросов минимальной и максимальной ширины.

• Делиться
• флипборд
• Эл. адрес

• Технологический институт Новой Англии

Джереми Жирар — писатель, педагог и директор по маркетингу/руководитель веб-дизайна и разработки в Envision Technology Advisors.

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

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

Медиа-запросы теперь являются стандартными, но очень старые версии Internet Explorer их не поддерживают.

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

Начните с хорошо структурированного HTML-документа без каких-либо визуальных стилей.

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

Добавление дополнительных медиа-запросов

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

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

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

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

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