Логіка медиазапросов

15

Від автора: Просто на випадок, якщо і у вас з цього приводу постійно бувають плутанина, як у мене.

If

Медиазапросы – це не більш ніж оператори If. Якщо умова вірно по відношенню до браузеру, використовуються внутрішні інструкції CSS.

And

Використовується ключове слово and.

@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}

Or

Альтернативи відокремлюються комою.

@media (max-width: 600px), min-width: 800px) {
html { background: red; }
}

Технічно до нього звертаються для поділу медиазапросов, але ефективно і or.

Not

Інверсія умови з допомогою ключового слова not.

@media not all and (max-width: 600px) {
html { background: red; }
}

Наскільки я знаю, якщо просто зробити not (max-width: 600px), то це не спрацює, звідси випливає вищенаведений злегка грубуватий синтаксис. Можливо, хтось зможе мені це пояснити. Зверніть увагу, що не має менший пріоритет, ніж кома, так що якщо ви відокремлюєте запити коми, то інверсія буде діяти тільки на внутрішній запит. Також зауважте, що not повертає назад логіку всього медиазапроса загалом, а не окремих його частин. not x and y = not (x and y) ≠ (not x) and y

Ексклюзивність

Щоб гарантувати одноразова дія тільки одного медиазапроса, підберіть числа (або інші параметри) так, щоб це стало можливим. Може бути, це буде легше, якщо організувати запити ось таким чином.

@media (max-width: 400px) {
html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
@media (min-width: 801px) {
html { background: blue; }
}

Логічно це трохи схоже на оператор switch, тільки без «якщо нічого не підійде, зробити так, як в установці за замовчуванням.

Перевизначення

Немає гарантій від того, що при виконанні не спрацюють відразу кілька медиазапросов одночасно. Тому в деяких випадках більш ефективно використовувати перевизначення, а не робити всі умови ексклюзивними, так як медиазапросы обробляються послідовно, зберігаючи вихідний порядок селекторів.

@media (min-width: 400px) {
html { background: red; }
}
@media (min-width: 600px) {
html { background: green; }
}
@media (min-width: 800px) {
html { background: blue; }
}

Вищенаведений код стане працювати, так як запити розташовані правильно. Змініть цей порядок, при ширині вікна браузера понад 800px фон стане червоним, що, можливо, здасться неочевидним.

Стратегія «Mobile First»

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

html { background: red; }
@media (min-width: 600px) {
html { background: green; }
}

Стратегія «Desktop First»

Стилі для великих екранів поміщаються у вашому звичайному CSS, а потім, у міру зменшення екрану ви переопределяете те, що потрібно. Для цього використовуємо медиазапрос max-width.

html { background: red; }
@media (max-width: 600px) {
html { background: green; }
}

Стаємо ексцентричними

Тут ви можете ускладнити все, наскільки захочете.

@media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}

Зверніть увагу, що ключове слово only знадобилося для того, щоб запобігти завантаженню таблиці стилів і застосування стилів неподдерживающими медиазапросы браузерами. Не впевнений, наскільки це зараз або коли-небудь раніше потрібно було насправді.