Медіазапити

Це інструмент, який робить можливим створення сучасних адаптивних веб-сторінок, які однаково добре виглядають на будь-якому екрані: десктопі або смартфоні. Робота з медіазапитами зводиться до застосування того чи іншого CSS-правила. Вибір та використання певного CSS-правила залежить від таких факторів, як розмір вікна браузера (області перегляду, в’юпорта), налаштування браузера, можливості пристрою і т.д.

@media screen and (min-width: 900px) {
body {
background-color: orange;
}
}

min-width

визначає мінімальну ширину області перегляду. У разі, якщо екран відповідає значенню в min-width, будуть застосовані вкладені CSS-правила.

max-width

визначає максимальну ширину в'юпорта, до якої включно будуть застосовуватися вкладені CSS-правила.