css - 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 .