时间戳

首页 > 解决方案 > CSS 媒体查询不适用于确切的 767

css - CSS 媒体查询不适用于确切的 767

问题描述

这是我的 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>

在此处输入图像描述

标签： cssmedia-queries

解决方案

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

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

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

推荐阅读