Адаптивность сайтов (media) с помощью CSS

Более 50% посетителей сайтов используют мобильные платформы. В основном это телефоны. В меньшей степени планшеты. Но в любом случае сайт должен хорошо отображаться для всех ширин устройств, иначе пользователи быстро уйдут с него.

Поисковые системы (google, yandex и др.) стараются не показывать в результатах поиска сайты, у которых нет мобильной адаптации. А учитывая что 80% посетителей приходят именно по поисковым запросам, то адаптация сайта для мобильных платформ становится обязательной. Иначе можно не рассчитывать на высокую посещаемость.

Чтобы часть кода показывалась только при определённых условиях, в 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 пикселей.

Таким образом можно адаптировать дизайн сайта к мобильным устройствам. Это повысит посещаемость и время пребывания пользователей на сайте.