CSS 媒体查询中的小数像素 (Chrome)答案

【问题标题】：Fractional Pixels in CSS Media Queries (Chrome)CSS 媒体查询中的小数像素 (Chrome)
【发布时间】：2020-05-21 00:33:09
【问题描述】：

我们的设计师正在他的 4k 显示器上测试响应式网站。断点之一如下：

<link rel="stylesheet" media="all and (min-width: 1000px)" href="/css/desktop.css" type="text/css" />
<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999px)" href="/css/tablet.css" type="text/css" />

足够简单。他设法在 999 到 1000 像素之间找到了一个 CSS 中断并且页面不正常的点。经过一番严重的头疼后，这解决了这个问题：

<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999.9px)" href="/css/tablet.css" type="text/css" />

当我用 Google 搜索时，我找不到任何关于在媒体查询中使用小数像素的信息。它甚至是一件事吗？这是最好的方法，还是有更好的选择？

【问题讨论】：

标签： css google-chrome responsive-design

【解决方案1】：

Chromium 似乎确实出现了一个错误，但被标记为已修复，因此应该不可能：https://bugs.chromium.org/p/chromium/issues/detail?id=689096

在这个关于 Firefox 中的错误的旧帖子中，他们谈到了同样的问题，尽管这没有标记为已修复：https://bugzilla.mozilla.org/show_bug.cgi?id=1120090

在该线程中，媒体查询中的小数像素被提及，就像它们是正常的一样。

我在高 DPI 屏幕上进行 Web 开发已经 7 年了，这还没有发生在我身上。我会说这不是真的。完全避免它的一种方法是从最大或最小屏幕向上（或向下）进行设计，仅覆盖并因此专门使用min-width 或max-width。

【讨论】：