@media at-правила используются для настройки стилей на определённых носителях: на экране или для печати. Но это можно довести до ещё большего уровня сложности, что позволит вам указывать различные варианты оформления в зависимости от размера экрана. Затем страница может быть оптимизирована и оформлена совершенно по-разному для мобильных телефонов, планшетов и различных размеров окна браузера.
Напомним, что если мы хотим применить некоторый CSS исключительно к медиа на основе экрана, например, одним из вариантов было бы вставить что-то вроде следующего в нижней части таблицы стилей:
@media screen {
body { font: 12px arial, sans-serif }
#nav { display: block }
}CSS, зависящий от размера браузера
В дополнение к предыдущему примеру, таргетингом могут быть не только экранные носители, но и экранные носители определённого размера:
@media screen and (max-width: 1000px) {
#content { width: 100% }
}Это указание браузеру применить блок CSS, когда его область просмотра имеет ширину 1000 пикселей или меньше. Вы могли бы использовать это для выполнения чего-то столь же простого, как сужение области содержимого или навигации, или вы могли бы полностью изменить макет страницы (например, наложить разделы страницы друг на друга вместо отображения их в столбцах).
Вы можете применять более одного @media правила, поэтому у вас может быть несколько разных дизайнов, зависящих от размера браузера:
@media screen and (max-width: 1000px) {
#content { width: 100% }
}
@media screen and (max-width: 800px) {
#nav { float: none }
}
@media screen and (max-width: 600px) {
#content aside {
float: none;
display: block;
}
}Обратите внимание, что, если бы, например, ширина области макета составляла 600 пикселей или меньше, были бы применены все три из них (потому что она была бы меньше или равна 1000px, 800px и 600px).
Помимо использования общего max-width в основной области контента (элементах article), на этом сайте также действует ряд CSS-правил, зависящих от размера. Если вы можете это сделать, попробуйте изменить размер вашего браузера, чтобы изменения вступили в силу.
Вы также могли бы использовать “min-width” вместо “max-width”, если хотите сделать всё наоборот и применить CSS к размерам, равным или превышающим определённую длину.
CSS, зависящий от ориентации
Если у вас есть страстное желание применять CSS в зависимости от ориентации браузера, используйте примерно такой код:
@media screen and (orientation: landscape) {
#nav { float: left }
}
@media screen and (orientation: portrait) {
#nav { float: none }
}Это может быть особенно полезно для мобильных устройств.
CSS для конкретного устройства
Мы не говорим о разных CSS для каждой марки и модели ноутбука, телефона и ослика — это было бы грешно, — но мы можем с относительно чистой совестью (если мы разумны) указать размеры экрана устройства и его соотношение пикселей.
“Карманный” тип мультимедиа действительно существует, и его можно использовать как @media handheld, но он не пользуется широкой поддержкой, и различие между тем, что такое “карманный”, стало размытым из-за распространения всевозможных устройств со всевозможными размерами экрана.
Ширина и высота
device-width, device-height, min-device-width, max-device-width, min-device-height, max-device-height может использоваться для таргетинга на вычисленное разрешение устройства:
@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {
/* Вы можете применить множество условий, разделённых "and" */
}Соотношение пикселей
Важно иметь в виду, что пиксель CSS не обязательно должен совпадать с физическим пикселем. Хотя экран физически может иметь ширину 720 пикселей, браузер может фактически применять CSS, предполагая, что его ширина составляет, например, 480 пикселей. Это делается для того, чтобы веб-страница стандартного дизайна с большей вероятностью поместилась на экране. В этом примере соотношение пикселей равно 1,5: 1: на каждый пиксель CSS приходится 1½ физических пикселя. Настольный монитор стандарта bog будет иметь соотношение пикселей 1: 1: Один CSS-пиксель к каждому физическому пикселю.
Если вы хотите применить стили только к этим устройствам, вы можете использовать что-то вроде:
@media (device-pixel-ratio: 2) {
body { background: url(twiceasbig.png) }
}Это относится к устройствам, подобным iPhone (4 и выше), с соотношением пикселей 2: 1. Вы также можете использовать min-device-pixel-ratio и max-device-pixel-ratio.
Говоря об айфонах, вы знаете, в чём дело: также используйте -webkit-device-pixel-ratio.
Возможно, вам также захочется поработать с видовым экраном устройства, чтобы настроить его воспроизведение так, как вы хотите. Возвращаясь к HTML, элемент meta заставит устройство отображать страницу по ширине окна просмотра (вместо того, чтобы пытаться отобразить дизайн большей ширины и уменьшить масштаб, что оно будет делать по умолчанию, если страница может быть шире ширины окна просмотра), а также запретит пользователю увеличивать и уменьшать масштаб:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Преимущество этого заключается в том, что вы можете точно контролировать, что применяется к какому физическому размеру экрана. И хотя удалять пользовательские элементы управления болезненно, если дизайн восхитительно шикарен и создан специально для этого маленького экрана, не должно быть необходимости увеличивать масштаб.
Веб-сайт HTML Dog использует такой подход: вместо того, чтобы маленькое устройство пыталось сделать веб-страницу больше и толще, уменьшив её, CSS превращает её в одностолбцовый дизайн, созданный специально для такого устройства.
Прочее
Вы также можете применять стили в зависимости от разрешения устройства:
@media screen and (resolution: 326dpi) { /* */ }
@media screen and (min-resolution: 96dpi) { /* */ }Или о соотношении сторон:
@media screen and (device-aspect-ratio: 16/9) { /* */ }Страницы в тему:
- Предыдущая страница: Градиенты
- Медиа правила
- Медиа-запросы
