Question

我正在尝试使用media queries来更改我的网站在不同尺寸上的显示方式......目前它不起作用：

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

为什么我的浏览器宽度大于975px时，不会打开网站，强制width到div.navbar > ul等等。然后当它小于975px强制width到100%以及其他内容max-width: 974px

Answer 1

请确保您声明使用的是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>

Answer 2

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

Answer 3

首先，您缺少<!DOCTYPE html>

您正在申请display:none，请将其删除

媒体查询CSS

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

    html {
        background:yellow;
    }

}

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

<强> http://jsfiddle.net/kbdvm5j6/12/

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

3 个答案: