Windows 的媒体查询在 1023px 宽度处失败

Question

我正在尝试设置媒体查询，以便网页响应并在宽度小于 1024 像素时切换视图。但是当 Google chrome DevTools 中的宽度设置为 1023px 时，不会应用媒体查询。以下面的类为例：

.test {
  @media screen and (min-width: 1024px) {
    border: 2px solid green;
  }

  @media screen and (max-width: 1023px) {
    border: 2px solid red;
  }
}

如果宽度为 1023 或更小，我想将边框设置为红色，如果宽度大于或等于 1024，我想将边框设置为绿色。但恰好在 1023 处看不到边框。它适用于其他宽度。

重现步骤：

1. 打开 Stackblitz：https://stackblitz.com/edit/angular-wzw4fp?file=src%2Fapp%2Fapp.component.html
2. 在 Stackblitz 中，点击在新窗口中打开（右上角），然后按 F12
3. 点击切换设备工具栏
4. 将宽度设置为 1023

实际：在 1023px 宽度处看不到边框

预期：红色边框的宽度为 1023 像素

所有浏览器上的 Windows 10 都存在此问题：Firefox、Google chrome、IE 等。 我正在编写一个 Angular 应用程序，但我希望这与 Angular 无关。

知道这是错误还是出了什么问题？

P.S：无法在 Linux 和 MacOS 上重现！它按预期工作。

Answer 1

无法在我的两台 Windows 10 机器上重现（一台是高 ppi 显示器）。

但是，在 CSS 中定义媒体查询时使用em 更为理想。这是因为一个像素可能不等于所有设备上的一个像素。当人们可能会更改其浏览器或操作系统中的默认 UI/文本大小时，这种情况越来越明显。

最后，不要为每个屏幕范围声明样式，而是尝试将您的移动（最小屏幕）样式声明为默认样式，然后随着屏幕变宽添加修改样式。

尝试以下方法，看看您是否仍然遇到问题：

.test {
  border: 2px solid red;
  @media screen and (min-width: 64em) {
    border: 2px solid green;
  }
}

编辑：添加屏幕截图以供确认