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

У меня есть следующий (упрощенный) пример код: (jsbin: http://jsbin.com/cisahilido/1/edit?html,css,output)Специфика медиа-запроса - почему это самый большой стиль, используемый при использовании мультимедийных запросов max-width?

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 будет красный фон. Однако, похоже, ВСЕГДА имеют синий фон, вплоть до точки останова 1024 пикселя, тогда он не имеет фона.

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

источник

2015-10-30 Prefix

Поскольку 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; 
    } 
}

источник

2015-10-30 21:06:52

Спасибо за помощь. :) – Prefix

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

ответ

Смежные вопросы