Использование media queries CSS
11 августа 2016 | Опубликовано в css | 1 Комментарий »
Изначально CSS поддерживал правила отображения для ограниченного количества устройств, таких как: все, экран, печать, портативные, телевизор и проектор. И ни одно из них не давало информации о размере, ориентации или разрешении устройства: экран может быть как 4 дюйма, так и 400, и одни и те же правила отображения применятся к обоим. CSS от версии 2.1 предоставляет другой впечатляющий набор правил отображения, который позволяет задавать стили устройствам с определенными возможностями с помощью media queries:
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="styles_h.css">
В коде выше таблица стилей styles_h.css будет использована только устройствами с экранами и максимальной шириной 480 пикселей. Обратите внимание, что это ширина именно устройства: если нужно использовать таблицу стилей для браузера, свернутого до ширины в 480 пикселей, синтаксис слегка изменится:
<link rel=stylesheet media="only screen and (max-width: 480px)" href="styles_small.css">
Это правило применится и к смартфонам, и к свернутым браузерам, запущенным на настольном компьютере, и в целом считается предпочтительным вариантом. Хотя использование отдельных таблиц стилей для устройств с разным разрешением и размером экрана непрактично и неэффективно: когда браузер загружает страницу, он загрузит все указанные таблицы стилей, независимо от текущего разрешения. Эти дополнительные запросы HTTP увеличат время загрузки страницы. Обычно намного лучше объединить все правила в одну основную таблицу стилей styles.css с помощью синтаксиса @media:
/* основные свойства CSS для всех устройств и разрешений экрана */ html, body { } @media print { /* особые свойства CSS для печати, добавляемые только если они противоречат свойствам выше */ } @media only screen and (max-width : 1200px) { /* свойства для настольных компьютеров и ноутбуков с меньшими размерами экранов, опять же добавляемые только если они противоречат основным свойствам выше */ } @media only screen and (min-width : 768px) and (max-width : 1024px) { } @media only screen and (max-width : 480px) { }
Важно заметить, что эти контрольные точки должны зависеть не от размеров популярных устройств, а от тех мест, где конкретному сайту нужно изменится.
Даже без использования специальных правил @media веб-сайт, созданный по принципам гибкого дизайна, обычно хорошо масштабируется при отображении на устройстве меньшего размера. Если это не такой случай, может помочь добавление мета тега в тег <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
И, наконец, нужно заметить, что можно вкладывать правила @media друг в друга:
@media screen { body { background: yellow } @media (min-width: 0px) { body { background: green } } }
Перевод — Дежурка
Смотрите также:
549