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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>123123</title>


<link rel="stylesheet" href="file:///F|/my history/test2018.3.5-2018.3.6/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css"/>


<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />


  <style>

    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;

}

}


    </style>



</head>


<body>

    <div id="header">

        <div class="container"> 

        <div class="row">

                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-8">

                    <p>文本</p>

                </div>

                <div class="col-lg-8 col-md-7 col-sm-6 col-xs-1">

                    <p id="loginmessage">右对齐文本</p>

                </div>

                <div class="col-lg-1 col-md-2 col-sm-2 col-xs-3">

                    <input id="logoutbtn" type=button value="退 出" onclick="location.href = 'https://www.baidu.com'" />

                </div>

            </div>

        </div>

    </div>

</body>

</html>

打个比方我把

@media (min-width: 992px) {

 .container {

width: 970px;

 }

  #logoutbtn{

width:100%;

}

这个放在最底下的时候,分辨率在1200PX以上时,显示的就是上面的样式。

还有在IE11的情况下,即使打乱顺序也不会出现上面的情况。我用chorme、360、edge打开都出现上述情况。请问究竟是浏览器的确不支持还是哪里有问题,还是说@media的确要按分辨率大小顺序严格编写。

慕无忌3133386
浏览 2202回答 8
8回答

幕布斯7574896

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

CodeManDSH

@media (max-width: 768px) {     .container {          width: 970px;     }}.container{    width:100px;}无论在多大的窗口打开,width都是100px;因为下面的同类名的样式覆盖了上面的样式
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Bootstrap