Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование 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 как обходной путь. Ниже представлено несколько решений:

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

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

Hicksdesign

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


Colly

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


A List Apart

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


Tee Gallery 

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

Заключение 

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

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

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

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




Комментарии

  1. ZAXAR__
    Thumb up Thumb down 0

    8) Gantry 4 это все делает 8)

  2. Сергей
    Thumb up Thumb down +1

    :(

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

    Где же взять эти стили в Вашем случае portraint.css и landscape.css

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

    Жду Вашего ответа!