Медиа-запросы @media
Как сделать так, что-бы элементы страницы (будь то онлайн чат, который обычно вылезает где-нибудь справа или блок с рекламой) адекватно реагировали (пропадали или изменяли свою ориентацию) на изменение устройства, изменение ширины браузера или экрана где просматривают веб сайт ? Что-бы были, так сказать, кроссмедийными ??
В этом нам помогут медиа запросы формата @media. Что-ж это такое и с чем его едят:
Описание
Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.
Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.
Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Смартфоны и аналогичные им аппараты. |
| Принтеры и другие печатающие устройства. | |
| projection | Проекторы. |
| screen | Экран монитора. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Медиа-функции
Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.
Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.
Для примера разберем одну медиа функцию:
width (min-width, max-width)
Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере при уменьшении окна до 500 пикселов и меньше убирается окошко онлайн консультанта, которая при этом размере ширины наезжает на текст веб-страницы.
<html>
<head>
<meta charset="utf-8">
<title>онлайн консультант виден до 500px</title>
<style>
@media screen and (max-width: 500px) {
#online_box { display: none; }
}
</style>
</head>
<body>
<div id="online_box">Тут скрипт консультанта который отображает справа окно</div>
</body>
</html>
Об остальных парматрах можно почитать подробнее в htmbooke тут
Комментарии
Конечно в спецификации все сухо, но я думаю не помешало бы ознакомиться.