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

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

67 голосов
/ 09 января 2012

В последнее время я разрабатываю сайты, которые будут более отзывчивыми, и я часто использую медиа-запросы 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 ]

116 голосов
/ 09 января 2012

Это дизайн 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 пикселей).

17 голосов
/ 06 ноября 2014

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

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

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

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

...