CSS Медиа запросы. Способ построения адаптивного сайта
- Подробности
- Категория: Для сайта
- Опубликовано 30.08.2014 13:46
Итак, в этом материале мы затронем весьма интересную тему создания адаптивных HTML страниц путём использования CSS медиа запросов.
Что вообще такое эти медиа запросы CSS? Эти самые запросы представляют собой обрамлённые коды в определённом синтаксисе, которые применяются только если экран пользователя соответствует условию запроса.
Вот пример запроса:
@media screen and (max-width: 600px) {
body {
background: #ccc;
}
/*Ваш код CSS*/
}
Из премера ясно что код будет применяться если экран видимая область для сайта (viewport) конечного пользователя меньше или равен 600 пикселям по ширине.
Внутри такого запроса может быть сколько угодно элементов к которым применяется сколько угодно свойств и все они будут задействованы только когда выполняется условие медиа запроса. Эта система напоминает своим принципом стандартный оператор if(){}, который имеется у большинства языков программирования. Как и в случае с if, медиа запросы могут иметь сразу несколько условий для выполнения вложенного CSS кода. Например:
@media screen and (min-width : 600px) and (max-width: 1000px) {
body {
background: #ccc;
}
/*Ваш код CSS*/
}
Сразу видно что выполняться будет если ширина вьюпорта от 600 до 1000 пикселей.
Как вы уже понились зам запрос строиться так:
@media screen and (УСЛОВИЕ){
/*Код*/
}
Вы наверное обратили внимание на слово screen. Это значит что-то вроде типа устройства куда идёт вывод. Ещё, кроме screen есть: all, projection, tv, print, 3d-glasses. Для мониторов, мобилок это screen, поэтому с ним у нас и все примеры. Вообще вместо него лучше ставить all (для всего), если вы не уверены с какого вентилятора пользователь откроет ваше приложение или игру или что там у вас.
Писать запросы вы можете как в css файлах, так и в самих HTML страницах. Более того вы можете в HTML вы можете создать медиа запросом условие при котором будет подключен файл:
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="/iphone4.css" />
Это файл который подключиться если плотность пикселей составит 2. Применяется в основном для идентификации четвёртого айфона.
Таким самым образом можно отдельно написать CSS файлы для портретной или ландшафтной ориентации:
<link rel="stylesheet" media="all and (orientation:portrait)" href="/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/landscape.css">
Это применяется многими веб-девелоперами.
С этим разобрались. Давайте теперь посмотрим какие запросы вообще могут применяться и работать в современных браузерах.
CSS Медиа запросы
Теперь мы посмотрим какие медиа запросы CSS ипользуются чаще всего и возможно вам пригодятся.
Список свойств будет написан с выдуманными параметрами чтобы вы понимали какие значения может содержать то или иное свойство:
min-width:100px - Минимальная ширина окна
max-width:35em - Максимальная ширина окна
max-device-width: 480px - Максимальная ширина устройства (в пикселях)
device-width: 768px - Ширина устройства
device-aspect-ratio: 9/16 - Соотношение сторон
orientation:landscape - Ландшафтная ориентация
orientation:portrait - Портретная ориентация
resolution: 96dpi - Плотность экрана
min-resolution: 192dpi - Минимальная плотность экрана
-webkit-device-pixel-ratio: .75 - Коэффициент плотности экрана (в примере значение 0.75)
-webkit-min-device-pixel-ratio: 1.3 Минимальный коэффициент плотности экрана
О последних параметрах хочется немного поговорить. Добавлю что resolution нестабильно работает. Некоторые устройства не принимают должным образом запрос. А вот -webkit-device-pixel-ratio это собственно условный коэффициент плотности экрана 0.75 это экран с низкой плотностью пикселей, а 2 это Retina.
P.S. Если вы хотите быстро проверить какие CSS запросы работают с вашим устройством и что они собственно отдают, тогда посетите вашим устройством.