В предыдущей статье я рассказал о том, и для чего она нужна. И там я сказал, что основной механизм адаптивной вёрстки - это медиа-запросы . Вот о медиа-запросах в CSS мы и поговорим в этот раз.
Давайте сразу разберём пример медиа-запроса :
body {
font-size: 9pt;
}
}
Данный код означает следующее: "Если ширина окна браузера 768px, то применить стили, указанные в фигурных скобках ". Чтобы лучше понять, как это работает, напишите вот такой код:
Медиа-запросы
body {
font-size: 15pt;
}
@media screen and (max-width: 768px) {
body {
font-size: 9pt;
}
}
Откройте этот код в браузере и обратите внимание на размер текста. Теперь начните уменьшать ширину окна браузера, и когда она достигнет 768px , то текст заметно уменьшится. Вот это и есть адаптивная вёрстка и работа медиа-запросов в CSS .
Безусловно, таких медиа-запросов может быть очень много, а внутри них может быть далеко не один селектор body , а сколько угодно самых разных селекторов.
Так же есть и другие параметры, такие как min-width , который будет срабатывать при указанной ширине и больше. Аналогичные параметры max-height и min-height , отвечающие за высоту. Так же можно комбинировать разные параметры через and :
@media screen and (max-width: 768px) and (max-height: 300px) {
body {
font-size: 9pt;
}
}
В данном случае стили будут подключаться только при ширине меньше, либо равной 768px и при высоте меньше, либо равной 300px .
Что касается практики, то могу смело сказать, что в 95% случаях используется лишь один max-width . Иногда ещё и min-width . И ещё раз повторяю, что есть и другие медиа-запросы в CSS , но забивать ими Вашу голову не буду. Но если очень хочется, то их можно посмотреть в справочнике.
Итак, в этом материале мы затронем весьма интересную тему создания адаптивных 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 вы можете создать медиа запросом условие при котором будет подключен файл:
Это файл который подключиться если плотность пикселей составит 2. Применяется в основном для идентификации четвёртого айфона.
Таким самым образом можно отдельно написать 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 запросы работают с вашим устройством и что они собственно отдают, тогда посетите эту страницу вашим устройством.
Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.Реализация Начнем с того, что семантическая разметка содержания упрощает перекомпоновку страниц в случае необходимости. С помощью таблицы стилей мы создали резиновый макет . Это первый шаг на пути к достижению нашей цели. Вместо атрибута width для контейнеров мы стали указывать max-width . Атрибут height был заменен атрибутом min-height , чтобы крупный шрифт или многострочный текст не нарушал границы контейнера. Чтобы картинки с фиксированной шириной не ломали резиновые столбцы, применяется следующее правило CSS:Img {
max-width: 100%;
}
Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью, медиа-запросы теперь поддерживаются всеми современными браузерами , в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.
Когда пиксель не является пикселем? В том случае, если речь идет о смартфоне. Обычно браузеры смартфонов имитируют браузеры настольных компьютеров с высоким разрешением, поэтому страницы отображаются в них, как на экране монитора. Вот почему появился «режим обзора» с мелким текстом, который невозможно прочитать без увеличения. Ширина области просмотра по умолчанию в стандартных браузерах Android составляет 800 пикселей, а в браузерах iOS – 980 пикселей, независимо от фактического количества физических пикселей на экране.
Чтобы переключить браузер в более удобный для чтения режим, необходимо использовать метаэлемент viewport:
Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение device-width, сообщаемое браузерами, обычно составляет около 320 пикселей. Если ширина экрана вашего мобильного устройства равна 640 физическим пикселям, изображение шириной 320 пикселей будет масштабировано на всю ширину экрана, и в обработке будет использоваться в два раза больше пикселей. Таким образом, вдвое большая плотность пикселей обеспечивает более четкое отображение на небольшом экране по сравнению с экраном настольного компьютера.
Важно, что если в качестве значения элемента width в метатеге viewport указывается device-width, это значение обновляется, если пользователь меняет ориентацию экрана смартфона или планшета. В сочетании с медиа-запросами эта функция позволяет изменять макет страницы при повороте устройства:
@media screen and (min-width:480px) and (max-width:800px) {
/* Target landscape smartphones, portrait tablets, narrow desktops
*/
}
@media screen and (max-width:479px) {
/* Target portrait smartphones */
}
В зависимости от того, как функционирует и выглядит ваш сайт на экранах различных устройств, может потребоваться использовать разные контрольные точки. Вы можете также использовать медиа-запрос для выбора определенной ориентации без учета соотношения размеров в пикселях, если эта функция поддерживается .
@media all and (orientation: landscape) {
/* Target device in landscape mode */
}
@media all and (orientation: portrait) {
/* Target device in portrait mode */
}
Изменяется расположение контента и масштаб изображений –
Пример использования медиа-запросовНедавно мы запустили новую версию страницы О Google . Чтобы пользователям устройств с небольшими экранами, такими как планшеты и смартфоны, было удобнее работать с этой страницей, кроме резинового макета мы добавили в ее код несколько медиа-запросов.
Вместо того чтобы нацеливаться на конкретные разрешения экранов, мы задали относительно широкий набор контрольных точек. Если разрешение экрана составляет более 1024 пикселей, страница отображается в своем первоначальном виде на сетке из 12 столбцов. Если оно составляет от 801 до 1024 пикселей, благодаря резиновому макету отображается слегка сжатая версия страницы.
Только при разрешении экрана менее 800 пикселей неосновной контент будет отображаться в нижней части страницы:
@media screen and (max-width: 800px) {
/* specific CSS */
}
Последний медиа-запрос предназначен для смартфонов:
@media screen and (max-width: 479px) {
/* specific CSS */
}
С этого момента прекращается загрузка больших изображений; блоки контента размещаются один над другим. Мы также добавили дополнительные пробелы между элементами контента, чтобы более четко разграничить разделы.
Эти простые приемы позволили оптимизировать сайт для просмотра на самых разных типах устройств.
Изменяется расположение контента, удалено большое изображение – О Google
- Перевод
Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries.
Для начала посмотрим это в действии. Пред началом посмотрите на финальное демо , что бы увидеть, как хорошо это выглядит. Изменяйте размер браузера, что бы увидеть как структура автоматически изменяется основываясь на ширине окна.Другие примеры Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress , которые я сделал используя media queries: iTheme2 , Funki , Minblr и Wumblr .Обзор Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Для проверки ширины используются media queries, если ширина меньше чем 980px, в этом случае макет становится резиновым, вместо фиксированной ширины. Если ширина меньше 650px, то контейнеры с контентом и боковой панелью расширяются на полный экран и становятся в одну колонку.
Demo
Site Description
Home
blog post
class = "widget" >
widget
footer
HTML5.js Обратите внимание, что в демо используется HTML5. Internet Explorer ниже 9-й версии не поддерживает новые элементы содержащиеся в HTML5, такие как , , , и прочие. Поэтому подключаем Javascript файл html5.js в HTML документ, который позволит IE понимать новые элементы.
CSSСбрасываем HTML5 элементы в block Следующий CSS сделает HTML5 элементы (article, aside, figure, header, footer, etc.) блочными.
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display : block ;
} Описываем основную структуру в CSS Я снова не буду вдаваться в подробности. Основной контейнер «pagewrap» имеет ширину 980px. «Header» имеет фиксированную высоту 160px. Контейнер «content» шириной 600px и прижат влево. «Sidebar» шириной 280px и прижат вправо.
#pagewrap {
width : 980px ;
margin : 0 auto ;
}
#header {
height : 160px ;
}
#content {
width : 600px ;
float : left ;
}
#sidebar {
width : 280px ;
float : right ;
}
#footer {
clear : both ;
} Шаг 1 На первом шаге в демо не реализованы media queries, поэтому при изменении размера окна браузера, макет будет оставаться фиксированной ширины.CSS3 Media Queries Теперь начинается самое интересное – media queries .Подключаем Media Queries Javascript Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Вы можете включить ее, добавив Javascript файл css3-mediaqueries.js .
Подключаем CSS media queries Создаем новый CSS файл для media queries. Посмотрите мою прошлую статью, что бы увидеть как работают media queries .
Размер экрана меньше 980px (резиновый макет) Для размера экрана меньше 980px применим следующие правила:
- pagewrap = ширина 95%;
- content = ширина 60%;
- sidebar = ширина 30%.
@media screen and (max-width: 980px) {
#pagewrap {
width : 95 % ;
}
#content {
width : 60 % ;
padding : 3 % 4 % ;
}
#sidebar {
width : 30 % ;
}
#sidebar .widget {
padding : 8 % 7 % ;
margin-bottom : 10px ;
}
}
Размер экрана меньше 650px (одноколоночный макет) Затем, задаем CSS правила для размера экрана меньше 650px.
- header = сбрасываем высоту в auto;
- searchform = позиционируем - 5px сверху;
- main-nav = сбрасываем позиционирование в static;
- site-logo = сбрасываем позиционирование в static;
- site-description = сбрасываем позиционирование в static;
- content = устанавливаем ширину auto (это растянет контейнер на всю ширину)
- sidebar = устанавливаем ширину 100% и убираем float.
#header {
height : auto ;
}
#searchform {
position : absolute ;
top : 5px ;
right : 0 ;
}
#main-nav {
position : static ;
}
#site-logo {
margin : 15px 100px 5px 0 ;
position : static ;
}
#site-description {
margin : 0 0 15px ;
position : static ;
}
#content {
width : auto ;
float : none ;
margin : 20px 0 ;
}
#sidebar {
width : 100 % ;
float : none ;
margin : 0 ;
}
} Размер экрана меньше 480px Этот CSS будет применяться для размеря экрана меньше 480px, которая соответствует ширине iPhone в альбомной ориентации.
- html = отключаем регулировку размера шрифта. По умолчанию iPhone увеличивает размер шрифта, для более комфортного чтения. Вы можете это отключить добавив -webkit-text-size-adjust: none;
- main-nav = сбрасываем размер шрифта до 90%.
html {
-webkit-text-size-adjust: none ;
}
#main-nav a {
font-size : 90 % ;
padding : 10px 8px ;
}
} Эластичные изображения Для того, чтобы сделать изображения эластичными, просто добавьте max-width:100% и height:auto . Изображения max-width:100% и height:auto работает в IE7, но не работает в IE8 (да, еще один странный баг). Для исправления нужно добавить width:auto\9 для IE8.
img {
max-width : 100 % ;
height : auto ;
width : auto \9 ; /* ie8 */
} Эластичные встраиваемые видео Для видео применяем те же правила, как для изображений. По непонятным причинам max-width:100% (для видео) не работает в Safari. Нужно использовать width: 100% .
.video embed ,
.video object,
.video iframe {
width : 100 % ;
height : auto ;
} Initial Scale Meta Tag (iPhone) По умолчанию iPhone Safari сжимает станицы, что бы вместить в экран. Следующий мета-тег говорит iPhone Safari использовать ширину устройства как ширину окна и отключить.
Финальное Демо Откроем финальное демо и поизменяем размер экрана, что бы увидеть media queries в действии. Не забудьте проверить в iPhone, iPad, Blackberry (последние версии) и Android телефонах, что бы увидеть мобильную версию.
Медиа-запросы — это функция CSS, которая позволяет содержимому веб-страницы адаптироваться к разным и разрешениям. Они являются неотъемлемой частью гибкого веб-дизайна и используются для настройки внешнего вида веб-сайтов для нескольких устройств с различным размером экрана. Так, Media Queries — это модуль CSS3, позволяющий преобразовывать контент в такие условия, как разрешение экрана смартфона или компьютера. Стал рекомендованным W3C стандартом в июне 2012 года и активно применяется сегодня в веб-разработке и графическом дизайне.
Многие функции мультимедиа — это функции диапазона, что означает, что они могут иметь префикс «min-» или «max-» для выражения ограничений минимального или максимального условия. Например, эта команда будет применять стили только в том случае, если ширина видового экрана браузера равна или меньше 12,450px: @media (max-width: 12450px) {...}.
Если вы создаете запрос функции мультимедиа без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном: @media (цвет) {...}.
Если функция не применяется к устройству, на котором работает браузер, выражения, содержащие эту функцию мультимедиа, всегда являются ложными. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формата экрана: @media speech и (соотношение сторон: 11/5) {...}.
Техническая спецификацияМедиа-запросы — это ключевой компонент адаптивного дизайна, который позволяет адаптировать CSS на основе различных параметров или характеристик устройства. Например, мультимедийный запрос может применять разные стили, если экран меньше определенного размера, или на основе того, удерживает ли пользователь свое устройство в портретном или альбомном режиме.
Синтаксис запросов к мультимедиа также используется в других контекстах, например, в медиа-атрибуте элемента , который может быть настроен на строку запроса мультимедиа для использования, чтобы определить, следует ли применять этот источник при выборе конкретного изображения для употребления в элементе
Метод Window.matchMedia () может использоваться для проверки окна на запросе в медиа. Вы также можете применить функцию MediaQueryList.addListener () для уведомления при изменении состояния запросов. С помощью этой функции ваш сайт или приложение смогут реагировать на изменения конфигурации устройства, ориентации или состояния.
Запросы мультимедиа для вызова стилейАдаптивный веб-дизайн столкнулся с медленной загрузкой содержимого. Сейчас процесс по устранению этого недостатка хорошо документирован. Есть несколько способов, которые разработчики используют для лучшей загрузки контента и изображений на разных устройствах.
Один из них — использование медиа-запросов, которые работают для вызова стилей пользовательского устройства на основе его размеров. В прошлом программисты спорили о том, являются ли медийные запросы наилучшим решением в случае с мобильными устройствами, и эти дебаты по-прежнему продолжаются. Сейчас официально признано, что CSS медиа-запросы (media queries) — это простой и эффективный способ обслуживания различного контента для ряда устройств, и наиболее часто используемые запросы — это те, которые касаются высоты и ширины окна просмотра.
CSS-стили для медиа-запросов сначала проверяют тип медиафайлов на строку пользовательского агента, прежде чем переходить к проверке физических атрибутов окна просмотра. Они являются объявлением CSS, которое можно вызвать с помощью внешней таблицы стилей. Внешний вызов будет выглядеть так: .
Прямой же вызов CSS будет выглядеть так:
@media screen and (min-width:320px)
and (max-width:480px){
/*Insert your styles here
Медиа-запросы CSS не являются модульными, а значит, это может затруднить их работу. Запрос элемента похож на медийный запрос, потому что он использует CSS при выполнении определенных условий. Однако эти виды данных основаны на элементах, а не на браузере, которые в настоящее время не поддерживаются в CSS3. Элементные запросы набирают обороты, тем более что они дополняют медиа-запросы CSS. Это означает, что оба могут в конечном итоге работать вместе, чтобы создавать более модульные и гибкие конструкции.
Масштабирование изображений для гибкого дизайна — достаточно простой процесс. Тем не менее, есть несколько проблем, на которые нужно обратить внимание. Речь идет о потере деталей и изображений при сжатии для размещения контента страницы на более мелких устройствах. Чтобы создать масштабируемые изображения, просто добавьте следующий код в таблицу стилей:
max-width: 100%;
Это уменьшит изображение, чтобы оно соответствовало размеру контейнера, который меньше ширины картинки. Установка максимальной ширины на 100% означает, что изображение не будет увеличиваться больше, чем его фактический размер.
Однако это может быть проблемой, когда дело доходит до производительности сайта, потому что вы по существу доставляете полноразмерный образ на каждое устройство. Для этого нет простого решения, особенно если вы работаете на сайте с устаревшими изображениями. Однако Adaptive Images — это плагин, который может оптимизировать ваши изображения на основе размеров экрана. Адаптивный дизайн на основе медиа-запросов Framework Foundation также позволяет обмениваться изображениями на основе размеров экрана.
При работе с изображениями необходимо использовать SVG, веб-шрифты, веб-тип и CSS.
