html - 媒体查询最大宽度不包括在内

Question

我正在为响应式网站设置样式表，并希望为宽度 >= 768px 的屏幕和宽度 < 768px 的屏幕提供不同的布局。但是，当我使用 @media (max-width: 767px) 时，767px 和 768px 都会受到媒体查询内容的影响。

我试过使用 @media (max-width: 768px) 代替，但它(如预期的那样)将媒体查询内容应用到 768px，这不是我需要的结果。

你可以在任何页面尝试这段代码(我在 Firefox 和 Chrome 上试过，结果相同):

body {
  background: red;
}

@media (max-width: 767px) {
  body {
    background: green;
  }
}

我创建了一个 fiddle ，您可以在其中看到问题:https://jsfiddle.net/e0hdyqc9/

当您将这些规则添加到页面时，767px 和 768px 都是红色的。但是，如果您尝试用 768px 替换 767px，您会发现现在 767px 和 768px 都是绿色的!这怎么可能？

Answer 1

将其放在页眉中:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

添加此 CSS:

@media only screen and (max-width: 767px) {
    body { background-color: green;  }}

@media only screen and (min-width:768px) {
  body { background-color: yellow;}}

由于最小值和最大值，红色背景不会显示!

当 width=767px 为绿色且 width=768px 为黄色时，不会有红色空间。