{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Luminary・发光体 的问题《这段css代码的 @media 为什么在谷歌浏览器中不生效，Edge正常?》','https://www.manongdao.com/q-1293023.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
这段css代码的 @media 为什么在谷歌浏览器中不生效，Edge正常???
@media (min-width: 992) 和@media (min-width: 1200)是照抄bootstrap3的，但是bootstrap3中的col-md这些都正常。
header .nav{
padding-top: 5px;
padding-bottom: 0px;
border-bottom:1px solid black;
box-shadow: 0 0 15px 0 #888;
height: 70px;
}
header .nav .left{
float: left;
width: 200px;
height: 60px;
background-color: blanchedalmond;
}
header .nav .center{
float: left;
display: block;
}
header .nav .center li{
float: left;
list-style-type: none;
width: 48px;
height: 50px;
text-align: center;
vertical-align: middle;
padding-top: 0px;
}
header .nav .center li a{
float: left;
padding: 5px 5px;
width: 50px;
font-size: 15px;
color: black;
height: 50px;
vertical-align: middle;
}
header .nav .center li a:hover{
color: black;
background-color: #dedede;
text-decoration: none;
}
header .nav .right{
float: right;
border-left: #990000 1px solid;
margin-top: 10px;
color: #990000;
width: 160px;
text-align: right;
font-size: 13px;
}
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992) {
header .nav{
padding-top: 5px;
padding-bottom: 10px;
height: 80px;
}
header .nav .left{
width: 200px;
height: 70px;
}
header .nav .center li{
width: 80px;
height: 80px;
padding-top: 10px;
}
header .nav .center li a{
padding: 15px 5px;
width: 80px;
font-size: 15px;
}
header .nav .right{
margin-top: 20px;
width: 180px;
}
}
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (max-width: 1200) {
header .nav{
padding-top: 10px;
height: 100px;
background-color:rebeccapurple;
}
header .nav .left{
width: 200px;
height: 80px;
}
header .nav .center li{
width: 100px;
height: 80px;
}
header .nav .center li a{
padding: 20px 5px;
width: 90px;
font-size: 19px;
}
header .nav .right{
margin-top: 20px;
width: 220px;
}
}相关HTML：
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta name="robots" content="noarchive">
<title></title>
<link href="/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="/css/site.css" rel="stylesheet" />
<link href="/css/index.css" rel="stylesheet" />
<script src="/lib/modernizr-2.6.2.js"></script>
<!--[if lt IE 9]>
<script src="~/Plugins/html5shiv.min.js"></script>
<script src="~/Plugins/respond/respond.min.js"></script>
<![endif]-->
</head>
<header>
<div class="nav">
<div class="container">
<div class="left"></div>
<ul class="center">
<p>
<a href="#" class="active">网站首页</a>
</p>
<p>
<a href="#">测试测试</a>
</p>
<p>
<a href="#">测试测试</a>
</p>
<p>
<a href="#">测试测试</a>
</p>
<p>
<a href="#">测试测试</a>
</p>
<p>
<a href="#">测试测试</a>
</p>
</ul>
<div class="right">
客服电话：0476-8888888<br>
客服电话：0476-8888888
</div>
</div>
<div class="clearfix"></div>
</div>
</header>
相关问题
- Views base64 encoded blob in HTML with PHP
- Is there a way to play audio on a mobile browser w
- HTML form is not sending $_POST values
- implementing html5 drag and drop photos with knock
- Adding a timeout to a render function in ReactJS
你看看你屏幕大小在你的范围里边吗@media (min-width: 992) 和@media (min-width: 1200) 这是说屏幕在992和1200之间的才生效
后面加px就好了~~