Урок CSS3 - Медиа-Запросы

Karakurt · 9 Авг 2015

Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены ниже

all - Все типы. Это значение используется по умолчанию.

braille - Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.

embossed - Принтеры, использующие для печати систему Брайля.

handheld - Смартфоны и аналогичные им аппараты.

print - Принтеры и другие печатающие устройства.

projection - Проекторы.

screen - Экран монитора.

speech - Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

tty - Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).

tv - Телевизоры.

[hr][/hr]

Пример

HTML:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <style>
   div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
   }
   @media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
   @media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
   @media screen and (device-width: 1024px) {
    div {width: 980px;}
   }
  </style>
 </head>
 <body>
  <div>
    Здесь основной контент страницы
  </div>
 </body>
</html>

[hr][/hr]

Данный урок многим сможет помочь при верстке макетов или разработке сайтов.

Также есть такое свойство как max-width и min-width, об этом я расскажу позже.

Переход в группу "Пользователь"

Урок CSS3 - Медиа-Запросы

Karakurt

Изучающий