Html 圆尺寸设置为rem和vmin压扁的小尺寸 问题

我正在尝试将我的root

font size

设置为在

calc（）

函数中使用

vmin

和

px

。当使用

rem

设置圆div的

高度和
宽度时，所述圆在小尺寸时被“挤压”（见下图和链接）。检查div时，报告计算的宽度和高度相等，尽管其外观“被压扁”




html{
字体大小：calc（10vmin+1px）；
}
.圆圈{
高度：1公厘；
宽度：1em；
背景颜色：蓝色；
边界半径：50%；
}

您可以尝试使用
vh
和
vw
指定尺寸，我不确定这是否是一种错觉，但在尝试了问题中给出的边界半径方法和背景图像径向梯度（结果更差）后，我认为使用填充圆Unicode字符可以获得更好的结果

选择的字体是否会改变事情需要实验，抗锯齿设置是否会产生影响也需要实验。下面是一个包含边界半径和字符方法的代码段，以便对它们进行比较。一个字符可能会产生更好的效果，因为字体设计师会理解如何尽可能地平滑事情。也许还值得尝试更大的Unicode填充圆并缩小它


html{
字体大小：calc（10vmin+1px）；
}
.圆圈{
高度：1公厘；
宽度：1em；
背景颜色：蓝色；
边界半径：50%；
}

●
您的代码看起来不错。我的第一个想法是它类似于div的默认填充。但在使用Chrome、Edge或Firefox的Windows10系统上，我无法通过缩小窗口大小来重现这种挤压。您使用的浏览器/操作系统/设备是什么？@AHaworth我使用的是一台运行Windows 10的PC，并使用Chrome 88、Firefox 85和Chrome Edge运行它。这是一个web应用程序的玩具示例，它需要FlexBox中的小圆形图标。这个问题在所有浏览器上都被复制了。我不确定为什么我没有看到这个问题-你要看多大尺寸？我没有看到问题…@AHaworth在JSFIDLE中，当视口宽度为100px时。虽然这似乎解决了问题，但它没有回答问题。不过，我已将您的观察添加到故障排除部分。谢谢你指出这一点！这似乎解决了这个问题，但我仍然不明白为什么使用
rem
会对div产生这样的影响。有趣的是，这个问题不会影响类型。我不认为这与使用rem有关，更重要的是边界的计算，不管你使用什么维度，当它是一个弧形/圆形时，不知何故使用了“整体”CSS像素，并且似乎不能解释为什么能够使用质量更好的屏幕——但字体就是为它设计的。（反正是我的猜测！）。