Почему порядок запросов в СМИ имеет значение в CSS?

В последнее время я разрабатываю сайты, которые более отзывчивы, и я часто использую CSS-запросы. Один шаблон, который я заметил, – это то, что порядок, в котором заданы медиа-запросы, имеет значение. Я не тестировал его в каждом браузере, но только в Chrome. Есть ли объяснение этого поведения? Иногда бывает неприятно, когда ваш сайт не работает должным образом, и вы не знаете, является ли это запросом или порядком написания запроса.

Вот пример:

HTML

 

Welcome to my website

CSS:

 body{ font-size:1em; /* 16px */ } .two{margin-top:2em;} /* Media Queries */ @media (max-width: 480px) { .body{font-size: 0.938em;} } /* iphone */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { body {font-size: 0.938em;} } /*if greater than 1280x800*/ @media (min-width: 1200px) { .two{margin-top:8em;} } /*1024x600*/ @media (max-height: 600px) { .two{margin-top:4em;} } /*1920x1024*/ @media (min-height: 1020px) { .two{margin-top:9em;} } /*1366x768*/ @media (min-height: 750px) and (max-height: 770px) { .two{margin-top:7em;} } 

Однако, если я написал запрос для 1024×600 в последний раз, браузер проигнорирует его и применит значение поля, указанное в начале CSS (margin-top: 2em).

 /* Media Queries - Re-arranged version */ @media (max-width: 480px) { .body{font-size: 0.938em;} } /* iphone */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { body {font-size: 0.938em;} } /*if greater than 1280x800*/ @media (min-width: 1200px) { .two{margin-top:8em;} } /*1920x1024*/ @media (min-height: 1020px) { .two{margin-top:9em;} } /*1366x768*/ @media (min-height: 750px) and (max-height: 770px) { .two{margin-top:7em;} } /*1024x600*/ @media (max-height: 600px) { .two{margin-top:4em;} } 

Если мое понимание медиа-запросов правильное, порядок не должен иметь значения, но, похоже, это так. Что может быть причиной?

Это по дизайну CSS – Каскадная таблица стилей.

Это означает, что если вы примените два правила, которые сталкиваются с одними и теми же элементами, он выберет последний, который был объявлен, если только первый не имеет !important маркера или более определен (например, html > body vs just body , последний менее конкретна).

Итак, учитывая этот CSS

 @media (max-width: 600px) { body { background: red; } } @media (max-width: 400px) { body { background: blue; } } 

если окно браузера имеет ширину 350 пикселей, фон будет синим, а с помощью этого CSS

 @media (max-width: 400px) { body { background: blue; } } @media (max-width: 600px) { body { background: red; } } 

и той же ширины windows, фон будет красным. Оба правила действительно совпадают, но второй – тот, который применяется, потому что это последнее правило.

Наконец, с

 @media (max-width: 400px) { body { background: blue !important; } } @media (max-width: 600px) { body { background: red; } } 

или

 @media (max-width: 400px) { html > body { background: blue; } } @media (max-width: 600px) { body { background: red; } } 

фон будет синим (с окном шириной 350 пикселей).

Или вы можете просто добавить минимальную ширину к более крупным медиа-запросам и не иметь никаких проблем, независимо от порядка.

 @media (min-width: 400.1px) and (max-width: 600px) { body { background: red; } } @media (max-width: 400px) { body { background: blue; } } 
  • Как я могу избежать перекрытия медиа-запросов?
  • Жидкость или система с фиксированной сеткой, в гибком дизайне, основанная на Twitter Bootstrap
  • Отзывчивый размер шрифта
  • Отзывчивый веб-дизайн работает на рабочем столе, но не на мобильном устройстве
  • Изменение точки останова на панели навигации при загрузке без использования МЕНЬШЕ
  • Масштабирование шрифтов по ширине контейнера
  • На странице начальной загрузки, как центрировать div
  • Простая страница Bootstrap не реагирует на iPhone
  • Переупорядочивание divs с помощью Twitter Bootstrap?
  • изменять размер шрифта в соответствии с размером div
  • css grid квадратов с flexbox
  • Interesting Posts
    Давайте будем гением компьютера.