@media 的分辨率编写顺序一定要按顺序吗

m5549***

我写了四种分辨率响应的css 然而我分辨率宽度大于1200px的时候，显示出的效果确是768分辨率的那个。然后我把四种格式随机打乱排列发现1200px以上时基本只显示排在最后那个分辨率下的CSS样式。

123123


body{
width:100%;
height:100%;
margin:0;
padding:0;
}
div{
height:100%;
}
#header{
height:30px;
font-size:12px;
color:grey;
background-color:whitesmoke;
}
div p{
line-height:30px;
}
#loginmessage{
text-align:right;
}
#logoutbtn{
height:100%;
background-color:#F33;
border-width:0px;
color:white;
}

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

@media (min-width: 1200px) {
   .container {
width: 1170px;
   }
   #logoutbtn{
width:150%;
}
}

@media (min-width: 992px) {
   .container {
width: 970px;
   }
   #logoutbtn{
width:100%;
}
}

@media (min-width: 768px) {
   .container {
width: 750px;
   }
   #logoutbtn{
width:130%;
}
}

@media (max-width: 768px) {
   .container {
width: auto;
    }
   #logoutbtn{
width:100%;
}
   #loginmessage{
display:none;
}
}




                  文本




                  右对齐文本











打个比方我把
@media (min-width: 992px) {
.container {
width: 970px;
}
  #logoutbtn{
width:100%;
}
这个放在最底下的时候，分辨率在1200PX以上时，显示的就是上面的样式。
还有在IE11的情况下，即使打乱顺序也不会出现上面的情况。我用chorme、360、edge打开都出现上述情况。请问究竟是浏览器的确不支持还是哪里有问题，还是说@media的确要按分辨率大小顺序严格编写。

翻***

css代码是从上向下、从左到右执行的，对于同样的选择器，后定义的样式会把先定义的样式覆盖掉。
如果你想提高优先级也行，使用!important。

ma***

@media (max-width: 768px) {
.container {
width: 970px;
}
}
.container{
width:100px;

}
无论在多大的窗口打开，width都是100px;
因为下面的同类名的样式覆盖了上面的样式

时代威客APP

时代威客公众号

时代威客小程序

猜你需要

热门需求

@media 的分辨率编写顺序一定要按顺序吗

参与会员2

可能感兴趣的问答

最新任务

最新问答

优

快

专

保

新手帮助

平台规则

关于时代

便捷服务

微信小程序

新浪微博

手机客户端