媒体查询最大宽度不能包容地工作答案

【问题标题】：Media query max-width not working inclusively媒体查询最大宽度不能包容地工作
【发布时间】：2019-11-12 12:53:48
【问题描述】：

我正在为响应式网站设置样式表，并希望为宽度 >= 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 都是红色的。但是，如果您尝试将 767px 替换为 768px，您会发现现在 767px 和 768px 都是绿色的！这怎么可能？

【问题讨论】：

我个人会使用 768px 作为我的断点，因为它也是一个引导断点。可以在这里看到：bootstrapcreative.com/bootstrap-4-media-queries 我的意思是相差 1px 我真的不认为这会是世界末日。
供以后阅读本文的任何人使用。我也遇到了这个烦人的问题，我终于发现这是一个 Windows 10 问题，您的缩放设置可能设置为 125% 或更高，将其设置回 100%，然后最大宽度媒体查询将按预期工作（即包括在内）。
对我来说，问题不在于 Windows 中的 125% 缩放（我继续使用）。相反，问题是在与笔记本电脑连接的外接显示器上显示我的屏幕（如果重要，通过 hdmi）。在那种情况下，我会让媒体查询关闭 1px。但是，如果我在笔记本电脑显示器上显示我的屏幕，则不再发生这种情况，一切正常，css 媒体查询完全按预期工作。

标签： html css media-queries

【解决方案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 为黄色时，将没有红色空间。

【讨论】：

您的图片没有为我加载，看起来 Imgur 已关闭。但是，它仍然不适合我。当width=767px时，body是白色的！你可以看到它发生在这个小提琴上：jsfiddle.net/e0hdyqc9
其实这个问题似乎只发生在我的机器上。我在其他机器上尝试了小提琴并为它们工作，所以我接受你的回答，因为它是正确的、符合标准的解决方案。谢谢！
供以后阅读本文的任何人使用。我也遇到了这个烦人的问题，我终于发现这是一个 Windows 10 问题，您的缩放设置可能设置为 125% 或更高，将其设置回 100%，然后最大宽度媒体查询将按预期工作（即包括在内）。
@Arad 可以确认这个解决方案。你知道为什么 windows 会影响媒体查询吗？
@dude 很高兴它有帮助。但是不，不幸的是，我不知道为什么会出现这个问题。