Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера
CSS3 Media Queries, или адаптация дизайна под разные разрешения экрана
24.06.14, 09:51:20



Очень часто бывает так, что резиновый дизайн сайта смотрится не очень хорошо на экранах с маленьким разрешением или на мобильных устройствах. Использовать Javascript или jQuery не всегда есть возможность, да и иногда приходится сводить количество скриптов до минимума, чтобы максимально увеличить скорость загрузки и рендеринга страницы.

И тут нам на помощь приходит CSS, в третьей версии которого увеличены возможности правила @media. Теперь можно не только задавать стили для разных типов устройств, но и также задавать отдельные стили для разных разрешений экрана. Реаливано все это с помощью логических операторов и специальных функций, а стилизуются элементы с помощью обычного CSS

Поддержка браузерами

  • Internet Explorer 9+
  • Firefox 3.6+
  • Google Chrome
  • Opera 10+
  • Safari 4+


Операторы
Всего есть три логических оператора - and, not и only
1. and (логическое И). Указывается для объединения нескольких условий
Код
@media all and (max-width: 900px) { ... }

2. not (логическое НЕ). Указывается для отрицания условия.
Код
@media all and (not handheld) { ... }

3. only. Применяется для старых браузеров, которые не поддерживают медиа-запросы.
Код
@media only all and (not handheld) { ... }

4. Также есть и оператор ИЛИ, но его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполнено, то стиль будет применён.
Код
@media all and (orientation: landscape), all and (min-width: 400px) { ... }


Функции
Функций для правила @media немало, тут будут перечислены самые нужные.

1. orientation. Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).
Код
/* стиль для экранов ПК в альбомном режиме */  
  @media screen and (orientation: landscape) { ... }  
  /* стиль для экранов ПК в портретном режиме */  
  @media screen and (orientation: portrait) { ... }

2. device-aspect-ratio. Определяет соотношение сторон экрана устройства. Значение указывается в виде двух чисел, разделённых между собой слэшем (/).
Код
/* стиль для экранов ПК с соотношением сторон 16/9 */  
  @media screen and (min-device-aspect-ratio: 16/9) { ... }

3. device-height. Определяет всю доступную высоту экрана устройства.
Код
/* стиль для смартфонов с минимальной высотой экрана 200 пикселей */  
  @media handheld and (min-device-height: 200px) { ... }

4. device-width. Определяет всю доступную ширину экрана устройства.
Код
/* стиль для экранов ПК с максимальной шириной экрана 1280 пикселей */  
  @media screen and (max-device-width: 1280px) { ... }

5. height. Определяет высоту отображаемой области в браузере.
Код
/* стиль для экранов ПК с минимальной высотой 600 пикселей */  
  @media screen and (min-height: 600px) { ... }

6. width. Определяет ширину отображаемой области в браузере.
Код
/* стиль для экранов ПК с максимальной шириной 600 пикселей */  
  @media screen and (max-width: 600px) { ... }



Применение
Если ширина окна браузера меньше значения, например, в 800 пикселей, то можно убирать некоторые объекты, чтобы страница не была переполнена ненужными на маленьком разрешении блоками. Например
Код
@media screen and (max-width: 800px) { #footer, .big-image {display: none} }


А если ширина окна браузера слишком большая, то можно вместо резинового дизайна сделать фиксированный, чтобы блоки не становились огромными на больших мониторах. Например
Код
@media screen and (min-width: 1400px) { body {width: 70%; margin: 0 auto} }


Возможности селекторов CSS, конечно, не так велики как возможности селекторов jQuery. Но в CSS есть немало полезных селекторов типа :nth-child(), :not(), :empty и :nth-of-type(), которые решают практически все проблемы нахождения нужного элемента на странице.

Демо (изменяйте размер окна браузера или меняйте зум страницы)
Демо 1, Демо 2
Категория: Статьи для вебмастера | Добавил: Apocalypse | Теги: или, дизайна, адаптация, Queries, разрешения, под, Разные, экрана, CSS3, media
Просмотров: 537 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: