Media queries CSS: управление шириной окна браузера

Media query (медиа-запрос) — это CSS технология, использующаяся для управления отображением веб-страниц в зависимости от типа устройства и характеристик его экрана (размер, разрешение и т.д.). Одним из наиболее полезных и часто используемых типов медиа-запросов являются запросы медиа-запросов по ширине (min-width и max-width).

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

Синтаксис для медиа-запроса по ширине:

@media (min-width: 600px) and (max-width: 900px) {

/* код CSS стилей */

}

Это указывает браузеру, что все стили, которые находятся внутри этого блока @media, должны применяться, когда ширина экрана находится в диапазоне от 600 до 900 пикселей.

Пример использования медиа-запроса по ширине:

/* Стили для мобильных устройств */

@media (max-width: 767px) {

body {

font-size: 14px;

line-height: 1.2;

}

.nav {

display: none;

}

}

/* Стили для планшетов */

@media (min-width: 768px) and (max-width: 991px) {

body {

font-size: 16px;

line-height: 1.5;

}

.nav {

display: block;

width: 50%;

float: left;

}

}

/* Стили для настольных компьютеров */

@media (min-width: 992px) {

body {

font-size: 18px;

line-height: 1.8;

}

.nav {

display: block;

width: 25%;

float: left;

}

}

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

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