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

Question

我正在尝试设置媒体查询，以便网页具有响应能力，并在宽度小于 1024px 时切换视图。但是，当 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 时看不到边框

预期：在 1023px 宽度处看到红色边框

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

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

Answer 2

这种不一致可能是由于多种因素造成的，包括浏览器缩放设置、设备像素密度或浏览器渲染怪癖。

按 Windows 徽标键 + U 或选择开始 > 设置 > 辅助功能。选择文字大小。

将主显示屏上的应用程序和文本的大小更改为100％，并拖动示例文本要渲染的滑块选项，然后单击应用到100％，问题将得到解决