Медиа запросы (media queries) – это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Их используются в тех случаях, когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Иными словами, это конструкции, которые позволяют определять какие стили необходимо использовать на веб-странице, а какие нет на основании определённых условий.
Медиа запросы используют при создании адаптивного дизайна сайта.
Для создания медиа запросов используется следующий синтаксис:
@media условие {
/* стили (они будут выполняться, если устройство соответствует указанному условию)
}
При создании адаптивных веб-страниц необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение дизайнов адаптивных сайтов на экранах устройств, имеющих высокую плотность пикселей.
Подключение метатега viewport к странице в большинстве случаях осуществляется так:
<meta name="viewport" content="width=device-width, initial-scale=1">
@media для мобильных устройств
/* monitors and laptops */
@media (min-width: 1240px) {}
/* tablet */
@media (min-width: 1024px) and (max-width: 1240px) {}
@media (min-width: 768px) and (max-width: 1024px) {}
/* mobile */
@media (max-width: 768px) {}
/* iPad in portrait & landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) {}
/* iPad in landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}
/* iPad in portrait */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}
/* Retina iPad in portrait & landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {}
/* Retina iPad in landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {}
/* Retina iPad in portrait */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {}
/* iPad 1 & 2 in portrait & landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){}
/* iPad 1 & 2 in landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad 1 & 2 in portrait */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in portrait & landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in portrait */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPhone 5 in portrait & landscape */
@media (min-device-width: 320px) and (max-device-width: 568px) {}
/* iPhone 5 in landscape */
@media (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {}
/* iPhone 5 in portrait */
@media (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {}
/* iPhone 2G-4S in portrait & landscape */
@media (min-device-width: 320px) and (max-device-width: 480px) {}
/* iPhone 2G-4S in landscape */
@media (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {}
/* iPhone 2G-4S in portrait */
@media (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {}