我写了四种分辨率响应的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的确要按分辨率大小顺序严格编写。
8 回答
幕布斯7574896
TA贡献38条经验 获得超3个赞
css代码是从上向下、从左到右执行的，对于同样的 选择器，后定义的样式会把先定义的样式覆盖掉。
如果你想提高优先级也行，使用!important。
CodeManDSH
TA贡献58条经验 获得超18个赞
@media (max-width: 768px) {
.container {
width: 970px;
}
}
.container{
width:100px;
}
无论在多大的窗口打开，width都是100px;
因为下面的同类名的样式覆盖了上面的样式
- 8 回答
- 0 关注
- 2201 浏览
添加回答
举报
0/150
提交
取消