Адаптивность сайтов (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 пикселей.

Таким образом можно адаптировать дизайн сайта к мобильным устройствам. Это повысит посещаемость и время пребывания пользователей на сайте.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: