Содержание:
- Медиа Типы
- Медиа запросы для Bootstrap 3
- Медиа запросы для Bootstrap 4
- Цветовые схемы
- Правило расположения медиа-запросов в коде
- Шпаргалки по параметрам различных устройств для медиа-запросов
Медиа Типы
В css есть 3 медиа типа:
- screen — задает стили для устройств с экраном
- speech — задает стили для синтезаторов речи
- print — задает стили для элементов которые находятся в режиме предварительного просмотра при печати
Для выбора всех медиа типов можно использовать ключевое слово all, если нужно выбрать несколько, их нужно указать через запятую. Также медиа тип можно не указывать, тогда по умолчанию будет установлено значение all.
При создании адаптивной верстки обычно ориентиром является ширина области просмотра (viewport), то есть та часть сайта которую видит пользователь. Для корректной работы адаптивной верстки на смартфонах и устройствах с большой плотностью пикселей нужно добавить мета-тег viewport внутрь секции head:
<meta name="viewport" content="width=device-width, initial-scale=1">Параметры устройства
Параметры указываются в круглых скобках, например: (max-width: 500px)
- width (min-width, max-width) — ширина (мин./макс. ширина) области просмотра
- height (min-height, max-height) — высота (мин./макс. высота) области просмотра
- resolution (min-resolution, max-resolution) — разрешение экрана (мин./макс. разрешение) (кол. пикселей). Значения указываются в:
- dpi — кол. точек на дюйм
- dpcm — кол. точек на сантиметр
- dppx — кол. точек на пиксель
- aspect-ratio (min-aspect-ratio, max-aspect-ratio) — соотношение сторон (мин./макс. соотношение) области просмотра
- orientation — проверяет в какой ориентации находится область просмотра. Имеет два значения:
- landscape — альбомный режим
- portrait — портретный режим
- hover — свойство hover на тач-события(он не поддерживается IE и Firefox.)
- min-width:0\0 — свойство hover на тач-события(данный код будет работать только в IE)
- min—moz-device-pixel-ratio:0 — свойство hover на тач-события(этот медиа-запрос сработает только для Firefox)
Универсальный медиа-запрос, срабатывающий при поддержке hover.
div{color:red;}
@media (hover) , (min-width:0\0) , (min--moz-device-pixel-ratio:0){
/*Поддерживает hover*/
div{color:green;}
}Логические операторы
Медиа типы и параметры часто используют вместе. Логические операторы позволяют задать сразу несколько условий или скомбинировать несколько медиа-запросов.
- and — логическое И, связывает несколько условий, стили будут применяться если все условия соблюдены
- , — (запятая) позволяет перечислить несколько условий, стили будут применяться только к тем условия, которые соблюдены
- not — логическое НЕ, отрицает условие
- only — не позволяет старым браузерам применять заданные стили (не влияет на современные браузеры)
Медиа запросы для Bootstrap 3
Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):
/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */
/* Стили CSS (по умолчанию) - для ширины viewport <768px */
/* Устроства с маленьким экраном (планшеты, 768px и выше) */
@media (min-width: 768px) { /* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */ }
/* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */
@media (min-width: 992px) { /* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */ }
/* Устройства с большим экраном (компьютеры, 1200px и выше) */
@media (min-width: 1200px) { /* Стили для устройств с шириной viewport >1200px */ }Вышеприведённые запросы необходимо использовать только в указанном порядке.
Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width. Это заставит их работать только в указанном диапазоне.
@media (max-width: 767px) { /* стили для xs-устройств */ }
@media (min-width: 768px) and (max-width: 991px) { /* стили для sm-устройств */ }
@media (min-width: 991px) and (max-width: 1199px) { /* стили для md-устройств */ }
@media (min-width: 1200px) { /* стили для lg-устройств */ }Медиа запросы для Bootstrap 4
Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):
/* xs - устройства (до 576px) */
/* CSS для ширины, которая меньше 575px (включительно) */
/* sm-устройства (больше или равно 576px) */
@media (min-width: 576px) { /* CSS для: 576px <= ширины <= 767px */ }
/* md-устройства (больше или равно 768px) */
@media (min-width: 768px) { /* CSS для: 768px <= ширины <= 991px */ }
/* lg-устройства (больше или равно 992px) */
@media (min-width: 992px) { /* CSS для: 992px <= ширины <= 1119px */ }
/* xl-устройства (больше или равно 1200px) */
@media (min-width: 1200px) { /* CSS для: ширины >= 1200px */ }Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):
/* xl-размер (>=1200px) */
/* CSS для >=1200px */
/* lg-размер (<=1199px) */
@media (max-width: 1199px) { /* CSS для ширины от 992px до 1199px */ }
/* md-размер (<=991px) */
@media (max-width: 991px) { /* CSS для ширины от 768px до 991px */ }
/* sm-размер (<=768px) */
@media (max-width: 767px) { /* CSS для ширины от 576px до 767px */ }
/* xs-размер (<=575px) */
@media (max-width: 575px) { /* CSS для ширины до 575px (включительно) */ }Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:
/* xs (<=543px) */
@media (max-width: 575px) { ... }
/* sm (>=576 и <=767) */
@media (min-width: 576px) and (max-width: 767px) { ... }
/* md (>=768 и <=991) */
@media (min-width: 768px) and (max-width: 991px) { ... }
/* lg (>=992 и <=1199) */
@media (min-width: 992px) and (max-width: 1199px) { ... }
/* xl (>=1200) */
@media (min-width: 1200px) { ... }
