Использование media queries CSS3

10 декабря 2014 | Опубликовано в css | 2 Комментариев »

CSS2 позволяет выбрать определенный файл стилей для определенных устройств отображения, таких как экран или печать. А с помощью CSS3 можно делать это еще более эффективно, благодаря media queries. Вы можете добавить выражения в селекторы типов устройств отображения, чтобы проверять выполнение определенных условий и применять разные файлы стилей. Например, у Вас может быть один файл стилей для больших мониторов и другой файл стилей специально для мобильных устройств. У этого свойства широкие возможности, оно позволяет подстроиться под разные разрешения и устройства вывода без изменений содержимого. Дальше в этом уроке мы покажем, как работать с этим свойством, и посмотрим на сайты, в которых свойство media queries активно используется.

Media queries CSS3

Посмотрите пример и поменяйте размер окна браузера, чтобы увидеть, как это работает.

Max Width

Следующий код CSS применится, если видимая область меньше 600px.

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

Если хотите, чтобы при определенных условиях применялись стили из определенного файла стилей, поместите следующую строку коду внутри тега <head>.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width

Следующий код CSS применится, если видимая область больше 900px.

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Несколько условий Media Queries

Вы можете использовать несколько условий media queries. Следующий код применится, если видимая область больше 600px и меньше 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Ширина устройства

Следующий код применится, если значение свойства max-device-width равно 480px, например у экрана iPhone. Обратите внимание: свойство max-device-width относится к фактическому разрешению экрана устройства, а свойство max-width относится к разрешению видимой области.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

Для iPhone

Следующий файл стилей добавлен специально для iPhone.

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

Для iPad

Еще можно использовать media query, чтобы определить вертикальную или горизонтальную ориентацию на планшете iPad.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Media Queries для браузера Internet Explorer

К сожалению, свойство media query не поддерживается в браузере Internet Explorer версии 8 и ниже. Но можно использовать Javascript как обходной путь. Ниже представлено несколько решений:

Хитрости CSS: использовние jQuery для определения размера окна браузера
Использование Javascript (Это старая, но до сих пор актуальная статья)
Плагин jQuery media queries

Примеры сайтов

Для того, чтобы увидеть, как меняется верстка в зависимости от размера окна браузера, Вам нужно зайти на следующие сайты через браузер, поддерживающий media queries, т. е., через любой современный браузер.

Hicksdesign

Большой размер: 3 столбца сбоку
Размер поменьше: 2 столбца сбоку, средний столбец опускается под левый столбец
Еще меньший размер: 1 столбец сбоку, правый столбец сдвигается вверх к логотипу
Наименьший размер: без столбцов сбоку, логотип и правый столбец сдвигаются вверх, а другие столбцы сдвигаются вниз

Colly

Верстка переключается между одним столбцом, двумя столбцами и четырьмя столбцами в зависимости от видимой области браузера.

A List Apart

Большой размер: меню сверху, 1 ряд изображений
Средний размер: меню слева, 3 столбца изображений
Маленький размер: меню сверху, нет фона на логотипе, 3 столбца изображений

Tee Gallery

Этот сайт очень похож на ранее показанный сайт Colly, но тут изображения меняют размер при растягивании верстки. Это достигается благодаря использованию процентных значений вместо значений в пикселях, например, width=100%.

Заключение

Не забывайте, если файл стилей оптимизирован для мобильных устройств, это не означает, что весь сайт оптимизирован для мобильных устройство. Чтобы быть действительно оптимизированным для мобильных устройств, изображения и разметка должны быть также уменьшены, чтобы загружаться быстрее. Свойство media queries предназначено для стилизации отображения сайта, а не для оптимизации производительности.

Автор урока Nick La

Перевод — Дежурка

Смотрите также:

Опубликовано в css, декабря 10, 2014
Метки: css, css media queries, css3, Media Queries, верстка, урок css, урок css3, урок верстка

�

ZAXAR__
11 декабря 2014 в 11:07
0

Gantry 4 это все делает 8)
Сергей
22 ноября 2016 в 14:05
+1

Я дико извиняюсь, но прочитав 100055000 ОДИНАКОВЫХ статей про «резиновые» шаблоны, ничего не понял, про вот эти дурацкие ссылки:
Где же взять эти стили в Вашем случае portraint.css и landscape.css

У многих ещё style.css print.css и много всякой «чуши» объясните не спецам в этой области, согласитесь, специалисты и без этой статьи своими руками разберутся!
Жду Вашего ответа!