Запрос СМИ CSS не меняет элементы?

Question

Я пытаюсь заставить этот медиа-запрос работать ... Я изменил цвет границы и элемента и положение, чтобы я мог четко видеть, когда он сработал, но, похоже, не применяет правило вообще - что я пропустил? Я ищу пространства и опечаток, но я не вижу какой-то ...

HTML

<div id="introcontainer"> 
    <div id="introcontainer2"> 
     <div class="introbox" id="introbox1">48</div> 
     <div class="introbox" id="introbox2">3</div> 
     <div class="introbox" id="introbox3">£99</div> 
    </div> 
</div> 

CSS

@media only screen and (min-width: 768px) and (max-width: 992px) { 

#introcontainer { 
    width: 660px; 
    height: 134px; 
    position: absolute; left: 50%; top: 100px; 
    margin-left: -330px; border-style: dashed; border-color: red;} 

.introbox { 
width: 214px; 
height: 130px; 
background: #fffff; 
opacity: 0.1; 
border-radius: 4px;} 
} 

#introcontainer {width: 660px; height: 134px; position: absolute; left: 50%;   top: 250px; margin-left: -330px; border-style: dashed; border-color: aqua;} 

#introcontainer2 {position: relative;} 
.introbox { 
width: 214px; 
height: 130px; 
background: #6666CC; 
opacity: 0.5; 
border-radius: 4px; 
} 

#introbox1 {position: absolute; left: 0px;} 

#introbox2 {margin-left: auto; margin-right: auto;} 
#introbox3 {position: absolute; right: 0px; top: 0px;} 

Answer 1

есть ли шанс, что вы забыли закрыть @media? , потому что, когда я удалил:

@media only screen and (min-width: 768px) and (max-width: 992px) { 

он работал.

вы можете увидеть это в этом codepen. также может быть, что ваше замедление @media может быть неправильным?

Я думаю, вы должны поместить его после обычного css или изменить минимальную/максимальную ширину.

Answer 2

Там есть пара вещей. Прежде всего, background:#fffff в .introbox должно быть #ffffff или #fff. Во-вторых, правила в правиле @media переопределяются следующими правилами за пределами @media. Все в порядке, просто переместите правило @media так, чтобы оно было в конце CSS, а не в начале. Если вам нужно что-нибудь еще, дайте мне знать.

Answer 3

Поместите свой медиа-запрос на часть CSS после обычных объявлений CSS, это должно сработать.

Answer 4

Если вы хотите изменить правила Элементом, когда экран < 992px вы должны использовать этот код:

@media screen and (max-width:992px){...} 

и попытаться избежать запроса диапазона, как:

and (min-width: 768px) and (max-width: 992px) 

НО у вас есть поставить его после «обычного» CSS.

Смотрите эту DEMO