CSS 媒体查询不适用于确切的 767答案

【问题标题】：CSS Media Query does not apply on exact 767CSS 媒体查询不适用于确切的 767
【发布时间】：2021-06-08 01:33:06
【问题描述】：

这是我的 html 文件。在浏览器宽度 769 上，正文的背景颜色为白色。在 768 上它变为绿色。在 767 上，我预计它会变成红色，但它仍然是绿色的。在 766 上它变成红色。所以我的困惑是为什么当屏幕尺寸精确为 767 时媒体查询不适用。

小提琴：https://jsfiddle.net/asifsomy/wtvknrja/3/show

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

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

<html lang="en">
<body>
</body>
</html>

【问题讨论】：

我在 Windows10 开发工具上的 Chrome 上试过这个，它工作正常 - 身体在宽度 767 上显示为红色。你用什么来测试它？
我在 Windows 10 上尝试了 Chrome 和 Firefox。
我们看到不同的东西很奇怪。你如何设置确切的宽度？我在 Chrome 开发工具上使用响应式“设备”。如果您尝试 766.99 会发生什么？
我添加了一个截图。我也在做同样的事情。无法将宽度更改为 766.999。

标签： css media-queries

【解决方案1】：

默认背景颜色为白色。您使用最大宽度，这就是为什么 background-color 仅在 768px 时显示绿色。当您的屏幕尺寸大于它的默认颜色时，它具有白色。如果屏幕尺寸大于 768 像素时您想要绿色，只需使用 min-width

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

屏幕尺寸 767px 主体颜色 https://prnt.sc/10hrmna

【讨论】：