Медиа запросы CSS – @media для мобильных устройств

Медиа запросы (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) {}

АВТОРИЗАЦИЯ