Чтобы часть кода показывалась только при определённых условиях, в CSS есть media запросы. Рассмотрим пример CSS кода:
.menu {display: block;}
@media (max-width: 600px) {
.menu {display: none;}
}Сначала этот код задаёт свойство «display: block» для элемента с классом menu. Но затем этой свойство меняет значение на «display: none«, если ширина страницы менее 600 пикселей. Так и происходит адаптация сайта под различную ширину.
Как и со всеми другими примерами CSS, свойства могут перезаписываться несколько раз. Рассмотрим такой код:
.menu {display: block;}
@media (max-width: 800px) {
.menu {display: inline-block;}
}
@media (max-width: 600px) {
.menu {display: none;}
}При открытии страницы в окне шириной менее 600 пикселей будут выполнен CSS код, который стоит внутри двух media запросов. Сначала у элемента с классом menu свойство display станет равным «block», затем станет равным «inline-block» и в конце примет значение «none». Если ширина окна будет чуть больше 600 пикселей, то выполнится только код внутри первого media запроса.
Есть возможно задавать не только максимальную, но и минимальную ширину браузера. К примеру, CSS код внутри блока
@media (min-width: 600px) { }будет выполняться уже при ширине экрана более 600 пикселей. То есть преимущественно на планшетах и персональных компьютерах с большими экранами.
В media запросах можно использовать логические операторы. К примеру, оператор «and»:
@media (min-width: 600px) and (max-width: 800px){ }— такой CSS код будет выполняться только при ширине окна от 600 до 800 пикселей.
Таким образом можно адаптировать дизайн сайта к мобильным устройствам. Это повысит посещаемость и время пребывания пользователей на сайте.
