Які правила накладання медіа-запитів CSS накладаються?
Каскад.
@mediaправила прозорі для каскаду, тому, коли @mediaодночасно збігаються два або більше правил, браузер повинен застосовувати стилі у всіх правилах, що відповідають, і відповідно вирішувати каскад. 1
Що станеться з усіма підтримуючими браузерами рівно 20em і 45em?
Шириною рівно 20em, ваш перший і другий медіа-запит будуть відповідати. Браузери застосовуватимуть стилі як у @mediaправилах, так і відповідно в каскаді, тому, якщо є якісь суперечливі правила, які потрібно замінити, виграє останній із оголошених (з урахуванням конкретних селекторів !importantтощо). Так само для другого та третього медіа-запитів, коли область перегляду має рівно 45em ширини.
Розглядаючи ваш приклад коду, додавши деякі фактичні правила стилю:
@media (max-width: 20em) {
.sidebar { display: none; }
}
@media (min-width: 20em) and (max-width: 45em) {
.sidebar { display: block; float: left; }
}
Коли область перегляду браузера має рівно 20em ширини, обидва ці медіа-запити повернуть істину. Каскадом, display: blockперевизначає display: noneіfloat: left застосовуватиметься до будь-якого елемента класу .sidebar.
Ви можете думати про це як про застосування правил, ніби медіа-запитів для початку не було:
.sidebar { display: none; }
.sidebar { display: block; float: left; }
Інший приклад того, як відбувається каскад, коли браузер відповідає двом або більше медіа-запитам, можна знайти в цій іншій відповіді .
Однак зауважте, що якщо у вас є декларації, які не збігаються в обох @mediaправилах, тоді застосовуватимуться всі ці правила. Тут відбувається об’єднання декларацій в обох @mediaправилах, а не лише останнє, яке повністю перекриває перше ... що підводить нас до вашого попереднього питання:
Як ми точно розподіляємо медіа-запити, щоб уникнути дублювання?
Якщо ви хочете уникнути дублювання, вам просто потрібно написати медіа-запити, які взаємовиключні.
Пам'ятайте, що префікси min-і max-означають "мінімум включно" та "максимум включено"; це означає, (min-width: 20em)і (max-width: 20em)обидва вони будуть відповідати області перегляду, ширина якої становить рівно 20em.
Схоже, у вас вже є приклад, який підводить нас до вашого останнього питання:
Я бачив, як люди використовують такі речі, як 799px, а потім 800px, а як щодо ширини екрану 799.5 px? (Очевидно, не на звичайному дисплеї, а на сітківці?)
Це я не зовсім впевнений; всі значення пікселів у CSS - це логічні пікселі, і мені було важко знайти браузер, який би повідомляв дробове значення пікселів для ширини області перегляду. Я пробував експериментувати з деякими фреймами, але нічого не міг придумати.
З моїх експериментів здається, що Safari на iOS округляє всі дробові значення пікселів, щоб переконатися, що одне з max-width: 799pxі min-width: 800pxзбігатиметься, навіть якщо область перегляду справді 799,5 пікселів (що, мабуть, відповідає попередньому).
1 Хоча ніщо з цього явно не зазначено ні в модулі умовних правил, ні в модулі Cascade (останній з яких в даний час передбачений для перезапису), мається на увазі, що каскад проходить нормально, оскільки в специфікації просто сказано застосовувати стилі в будь-якому і всі @mediaправила, що відповідають браузеру чи медіа.