Медіа запити 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) {}

АВТОРИЗАЦІЯ