Медиа-запросы

Медиа-запросы адаптируют веб-содержимое для разных размеров экрана. Проще говоря, применяются разные стили CSS в зависимости от размера окна просмотра. Например, вы можете иметь один стиль для большого дисплея, а другие стили специально для мобильных устройств. Это довольно интересно, поскольку позволяет отобразить содержимое без изменений на любом устройстве.

Медиа-запросы

Максимальная ширина

Медиа-запрос будет применяться, если область просмотра меньше чем 600px.

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

Если вы хотите сделать ссылку на отдельную таблицу стилей для медиа-запросов, нужно дописать ссылку на стиль, между тегами head.

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

Минимальная ширина

Медиа-запрос будет применяться, если область просмотра больше 900px.

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

Множественные запросы

Можно объединить несколько медиа-запросов. Следующий код CSS будет применяться, если область просмотра между 600px и 900px.

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

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

Медиа-запрос будет применяться, если устройство шириной 480px (например для iPhone).

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

Для iPhone 4

Стиль подключается специально для iPhone 4.

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

Для IPad

Медиа-запрос для выявления ориентации дисплея (альбомная или книжная) на IPad.

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

Для Internet Explorer

К сожалению, CSS3 Media Queries не поддерживается в Internet Explorer 8 и старее. Нужно использовать JavaScript.

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

CSS3 Media Queries
Пример адаптированного сайта Hicksdesign для разных размеров экрана
CSS3 Media Queries
Изменение количества колонок в зависимости от размера монитора
CSS3 Media Queries
Изменение расположения меню сайта
CSS3 Media Queries
Использование процентов для ширины, вместо фиксированных пикселей

Заключение

Имейте в виду: медиа-запросы предназначены для презентации, а не для оптимизации CSS. Как оптимизировать адаптивный дизайн рассказывается здесь. Для мониторов с большой плотностью пикселей применяется тег HTML5 picture. Также стоит обратить внимание на Автоматическое масштабирование.

54321
(1 голос, в среднем: 4 из 5)