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" />

在我谷歌搜索时，我没找到有关在媒体查询中使用分数像素的任何信息。这是真的吗？这是最好的方法吗？还是有更好的替代方案？

- Geat

Answer 1

似乎对于Chromium来说它确实作为一个错误出现了，但被标记为已解决，因此不应该再发生：https://bugs.chromium.org/p/chromium/issues/detail?id=689096 在这个有关Firefox中的错误的旧主题中，他们谈到了同样的问题，尽管这个问题没有被标记为已解决：https://bugzilla.mozilla.org/show_bug.cgi?id=1120090 在那个主题中，媒体查询中的小数像素被提到，好像它们是一件很正常的事情。

我已经在高DPI屏幕上进行网站开发7年了，但这种情况从未发生过。我认为它并不是真正存在的问题。完全避免它的一种方法是从最大或最小的屏幕开始设计（向上或向下），仅使用min-width或max-width覆盖并排他性地使用。

- anykey

---

在最新的Windows Chrome上缩放后，我刚刚成功地复现了这个问题，所以似乎仍然有可能。 - Pavel Gurecki