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

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

вот пример:

HTML

<body>
    <div class="one"><h1>Welcome to my website</h1></div>
    <div class="two"><a href="#">Contact us</a></div>
</body>

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;}
}

однако, если бы я написал запрос для 1024x600 в последнем, браузер проигнорировал бы его и применил значение маржи, указанное в начале 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;}
}

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

2 59
css css3 media-queries responsive-design

2 ответа:

это по дизайну CSS-Каскадной таблицы стилей.

это означает, что если вы примените два правила, которые сталкиваются с одними и теми же элементами, он выберет последний, который был объявлен, если только первый не имеет !important маркер или более конкретно (например,html > body против 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;
  }
}

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

наконец,

@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 пикселей).

106

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

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

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

используя этот код, в любом порядке цвет фона всегда будет красным для разрешений с шириной 400.1 px-600px и всегда будет синим для разрешений с шириной 400px или меньше.

13