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