为什么我的@media查询不起作用？

我试图用media queries改变我的网站看起来以不同的大小。目前它不工作：为什么我的@media查询不起作用？

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; \t 
 
} 
 
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); \t 
 
} 
 
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> \t 
 
    </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力内max-width: 974px

来源

2014-11-05 zxc

请添加相关信息，如包含此导航栏和正在测试的浏览器的HTML代码段。另外，您是否看到过编辑器中的“代码段”按钮？真的有用的尝试！ – GolezTrol 2014-11-05 11:15:47

@GolezTrol - 已更新，并且没有 - 我还没有看到代码段按钮^^;它似乎只在最近的stackoverflow上流行起来。 – zxc 2014-11-05 11:20:15

顺便说一句：你的标记是错误的。 'ul'可能只包含''而不是'div'。 – Abhitalks 2014-11-05 11:29:08

的width到100%和其他的东西确保你的，你宣布你使用HTML 5和对视了元标记。

<!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>

来源

2014-11-05 11:22:17 Bradley

嗨，我已经添加了meta标签。它似乎允许'position：absolute'和'margin-top'工作，但不是'width'？ – zxc 2014-11-05 11:24:53

你在使用display：none吗？如果您错误地使用它，请从您的HTML代码中删除它。

来源

2014-11-05 11:36:09 Gajen

首先你缺少<!DOCTYPE html>

你在身体运用display:none，请删除它

媒体查询CSS

@media screen and (max-width: 974px) { 

    html { 
     background:yellow; 
    } 

}

我已经更新了小提琴（调整窗口生效媒体查询）

http://jsfiddle.net/kbdvm5j6/12/

来源

2014-11-05 12:38:24

为什么我的@media查询不起作用？

回答

相关问题