Отзывчивый веб-дизайн.

Знакомство с медиазапросами.

К счастью, организация W3C включила в спецификацию CSS3 синтаксис медиазапросов, усовершенствовав методологию медиатипов. Медиазапросы позволяют не только ориентироваться на конкретный класс устройств, но и анализировать физические характеристики устройства, использующегося для отображения страницы (http://bkaprt.com/rwd/27/).

Взгляните на следующий отрывок:

@media screen and (min-width: 1024px) {

body {

font-size: 100 %;

}.

}.

Каждый медиазапрос, включая и этот, содержит два компонента:

1. Он начинается с медиатипа (screen), взятого из списка утвержденных медиатипов спецификации CSS2.1 (http://bkaprt.com/rwd/26/).

2. После типа идет сам запрос в скобках: (min-width: 1024px), который тоже можно разделить на две составляющие: название свойства (min-width) и соответствующее значение (1024px).

Считайте, что медиазапросы просто проверяют ваш браузер. В процессе считывания таблицы стилей браузер получает вопрос от медиазапроса screen and (min-width: 1024px): относится ли он к медиатипу screen, и если да, то имеет ли он ширину области просмотра не меньше 1024 пикселей. Если браузер отвечает на оба вопроса положительно, вложенные в запрос стили отображаются, в противном случае браузер попросту игнорирует их и занимается своими делами.

Этот медиазапрос вписан в объявление @media, что позволило включить его непосредственно в таблицу стилей. Но вы можете также поместить запрос в элемент ссылки (link), вставив его в атрибут media:

<link rel="stylesheet" href="wide.css" media="screen and (min-width: 1024px)" />

Кроме того, вы можете прикрепить его к инструкции @import:

@import url("wide.css") screen and (min-width: 1024px);

Лично я предпочитаю использовать @media, поскольку он хранит ваш код в отдельном файле, уменьшая количество внешних запросов браузера к серверу.

В принципе, неважно, куда вы впишете запрос, результат будет одинаковым: если браузер соответствует медиатипу и при этом выполняет условие, указанное в запросе, вложенные в запрос CSS выполняются, если нет – игнорируются.