CSS Медиа запросы. Способ построения адаптивного сайта

css-media-queries

Итак, в этом материале мы затронем весьма интересную тему создания адаптивных 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 запросы работают с вашим устройством и что они собственно отдают, тогда посетите эту страницу вашим устройством. 


You have no rights to post comments

Карта сайта