为什么我的@media查询不起作用？
[英]why doesn't my @media queries work?
问题描述
我正在尝试使用media queries来更改我的网站在不同尺寸下的显示方式...目前不起作用：
html {background:#333;} body {background:#F0F1F2;} html, body { width:100%; min-height:100%; } * { margin:0; padding:0; font-family:'bl-reg', sans-serif; font-size:12px; color:#333; z-index:inherit; } h1, h2, h3, h4, h5, h6, p, a, li, tr, th, td { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor:default; } a { font-family:'bl-reg', sans-serif; font-weight:inherit; font-size:inherit; text-decoration:none; color:inherit; cursor:pointer; } a:hover { text-decoration:underline; } .margin-center { margin:auto auto; } .pull-left { float:left; } .pull-right { float:right; } div.navbar { height:48px; overflow:auto; background:#FFF; } div.navbar > ul { list-style-type:none; } div.navbar > ul li.brand, div.navbar ul li.link { display:inline-block; } div.navbar > ul li.brand { font-weight:bold; font-size:14px; } div.navbar ul li.link { font-size:12px; } div.navbar > ul li a { display:block; padding:15px; } div.navbar > ul li.link a { display:block; padding:16.5px 15px; color:rgba(51,51,51,0.75); } div.navbar > ul li.link a:hover { color:rgba(51,51,51,1); } div.navbar > ul li a:hover { text-decoration:none; } } @media screen and (min-width: 975px) { div.navbar > ul { width:975px; } } @media screen and (max-width: 974px) { div.navbar > ul { width:100%; } div.navbar > ul > div.collapse { position:absolute; margin-top:48px; } }
<html> <head> <title>Welcome</title> <link rel="stylesheet" type="text/css" href="./default.css" /> <link rel="stylesheet" type="text/css" href="./fonts.css" /> <script src="./jquery-1.11.1.min.js"></script> <script src="./global.js"></script> </head> <body style="display:none;"> <div class="navbar"> <ul class="margin-center"> <li class="brand pull-left"> <a href="#">stack</a> </li> <div class="collapse"> <li class="link"> <a href="#">Hello</a> </li> <li class="link"> <a href="#">Hello</a> </li> <li class="link"> <a href="#">Hello</a> </li> <li class="link pull-right"> <a href="#">World</a> </li> </div> </ul> </div> </body> </html>
为什么不打开浏览器宽度大于975px的网站将width为div.navbar > ul等。 然后当它小于975px时，将width为100% ，将其他内容设置为max-width: 974px
3 个解决方案
解决方案1
1 已采纳 2014-11-05 11:22:17
确保您声明使用html 5并具有视口的meta标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<p>jargin</p>
</body>
</html>
解决方案2
0 2014-11-05 11:36:09
您是否在使用display：none in body？ 如果您误使用它，请将其从HTML代码中删除。
解决方案3
0 2014-11-05 12:38:24
首先，您缺少<!DOCTYPE html>
您正在应用display:none身体，请移除它
媒体查询CSS
@media screen and (max-width: 974px) {
html {
background:yellow;
}
}
我更新了小提琴（调整窗口大小以使媒体查询生效）
为什么我的媒体屏幕查询不起作用，为什么我的网站无法响应？
[英]Why doesn't my media screen query work, I can't make my website responsive?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.