媒体查询最大宽度不适用于所有内容

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

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

将这些规则添加到页面时，两个767px和768px均为红色。但是，如果尝试将768px替换为768px，您会发现现在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为黄色时，将没有红色空间。