為什么我的@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.