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

有几件事。首先，.introbox中的background:#fffff应该是#ffffff或#fff。其次，@media 规则中的规则正在被 @media 之外的以下规则覆盖。没关系，只需移动 @media 规则，使其位于 CSS 的末尾而不是开头。如果您还需要什么，请告诉我。

Answer 2

将媒体查询 CSS 部分放在常规 CSS 声明之后，这应该有效。

Answer 3

您是否有可能忘记关闭@media？因为当我删除：

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

成功了。

你可以在这个codepen中看到它。也可能你的@media 减速有误？

我认为你应该把它放在常规 css 之后，或者更改 min/max-width。

Answer 4

如果您想在屏幕小于 992 像素时更改元素的规则，您应该使用此代码：

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

并尽量避免像这样的范围查询：

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

但是你必须把它放在 "normal" CSS 之后。

看到这个DEMO

CSS 媒体查询不改变元素？

CSS media query not changing elements?

html

css

media-queries