Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Использование 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 }
}
}

Перевод — Дежурка

Смотрите также:




Комментарии