@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的确要按分辨率大小顺序严格编写。
慕无忌31333868回答
-
幕布斯7574896
css代码是从上向下、从左到右执行的，对于同样的 选择器，后定义的样式会把先定义的样式覆盖掉。 如果你想提高优先级也行，使用!important。 -
CodeManDSH
@media (max-width: 768px) { .container { width: 970px; }}.container{ width:100px;}无论在多大的窗口打开，width都是100px;因为下面的同类名的样式覆盖了上面的样式
随时随地看视频慕课网APP
Bootstrap