Специфика медиа-запроса - почему самый большой стиль используется при использовании медиа-запросов максимальной ширины?

Question

Специфика медиа-запроса - почему самый большой стиль используется при использовании медиа-запросов максимальной ширины?

У меня есть следующий (упрощенный) пример кода: (jsbin: http://jsbin.com/cisahilido/1/edit?html,css,output)

SCSS:

.container {
  background: none;
}

@media screen and (max-width: 480px) {
  .container {
    background: red;
  }
}

@media screen and (max-width: 768px) {
    .container {
    background: white;
  }
}

@media screen and (max-width: 1024px) {
    .container {
    background: blue;
  }
}

разметка:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    hello!
  </div>
</body>
</html>

Теперь, когда экран 480px или меньше, я ожидаю .container иметь красный фон. Тем не менее, кажется, что ВСЕГДА имеет синий фон, вплоть до точки останова 1024px, тогда у него нет фона.

Почему стили максимальной ширины переопределяют меньшие точки останова на более крупные?

1

css media-queries css-specificity css-cascade

Источник

user1088373 30 окт '15 в 21:01

1 ответ

Решение

Другие вопросы по тегам css media-queries css-specificity css-cascade

user429925 30 окт '15 в 21:06 2015-10-30 21:06 · Accepted Answer · 2015-10-30 21:06

Поскольку 480 меньше последней максимальной ширины 1024. CSS всегда использует последнее допустимое значение, поэтому вам нужно упорядочить медиазапросы максимальной ширины от наибольшего к наименьшему, чтобы получить требуемое значение.

jsbin

.container {
    background: none;
}

@media screen and (max-width: 1024px) {
    .container {
        background: blue;
    }
}

@media screen and (max-width: 768px) {
    .container {
        background: white;
    }
}

@media screen and (max-width: 480px) {
    .container {
        background: red;
    }
}