CSS 媒体查询中的分数像素 (Chrome)

Question

我们的设计师正在他的 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" />

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

Answer 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。