html - 高密度显示器上笔画宽度中的 REM 单位

Question

我遇到的问题是我认为它可能是一个错误，并且不确定它是否是。

基本上，当您的笔画宽度 = 1 rem 时，浏览器会采用根字体大小并将其乘以屏幕密度比，如下所示：

在大多数 PC 等上：

ratio: 1
html font size: 14px
svg stroke width: 1rem => 14px * 1 = 14px
effective pixel stroke width => 14px * 1 = 14px

它在那里运作良好。

在移动设备上，该比率更高，因此：

ratio: 2
html font size: 14px
svg stroke width: 1rem => 14px * 2 = 28px
effective pixel stroke width => 28px * 2 = 56px

所以有效行程是预期的两倍。

代码笔在这里。

codepen 由两个半透明的矩形组成。它们在 PC 上重叠，但在移动设备上，SVG 栏更宽。

这是有意的还是有办法解决它？

score 0 · Accepted Answer

是的，这是一个错误。

事实证明，Paul LeBeau 为我指出了正确的方向——这个问题可以在三星现有的浏览器中复制，但不能在同一设备上的 Chrome 浏览器中复制。

因此：

一些浏览器（即使它们共享一个共同的基础）会有某些错误，这就是其中之一，所以在移动设备上使用 SVG 中的 REM 单元时要注意这一点:)

1 回答 1