Почему порядок запросов в СМИ имеет значение в CSS?
В последнее время я разрабатываю сайты, которые более отзывчивы, и я часто использую CSS-запросы. Один шаблон, который я заметил, – это то, что порядок, в котором заданы медиа-запросы, имеет значение. Я не тестировал его в каждом браузере, но только в Chrome. Есть ли объяснение этого поведения? Иногда бывает неприятно, когда ваш сайт не работает должным образом, и вы не знаете, является ли это запросом или порядком написания запроса.
Вот пример:
HTML
- загрузочная таблица 3 с фиксированной первой колонкой
- Не отображается ли «display: none», чтобы изображение не загружалось?
- Поддерживать соотношение сторон по ширине и высоте
- Как использовать Twitter Bootstrap 3 для сайта, не отвечающего требованиям?
- Щебетать сетку Bootstrap 3, изменение точки останова и удаление прокладки
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
- Поддерживать соотношение сторон в соответствии с высотой
- Полноэкранный отзывчивый фоновый рисунок
- Отзывчивый веб-сайт уменьшен до полной ширины на мобильном телефоне
- iPhone 5 CSS-медиа-запрос
- Отзывчивый сайт на iPhone - нежелательное белое пространство для поворота от пейзажа к портрету
- Как удалить отзывчивые функции в Twitter Bootstrap 3?
- Создание чувствительного к iframe
Это по дизайну 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; } }