html - 用 rem 和 vmin 设置的圆尺寸在小尺寸时被压扁

转载作者：行者123 更新时间：2023-12-04 03:39:42

26

4

问题

我正在尝试设置我的根 font-size 以在 calc() 中使用 vmin 和 px > 功能。当使用 rem 设置圆 div 的 height 和 width 时，所述圆在小尺寸时被“压扁”(见下面的照片和链接)。检查 div 时，报告计算出的宽度和高度相等，尽管它的外观“被压扁”。

Link to JSFiddle

html {
  font-size: calc(10vmin + 1px);
}

.circle {
  height: 1rem;
  width: 1rem;
  background-color: blue;
  border-radius: 50%;
}

<html>
  <div class="circle"></div>
</html>

疑难解答

当 height 和 width 更改为 px 值时，问题已解决。此外，将根字体大小更改为不使用 vmin、vh 或 vw 来计算大小似乎也可以解决问题。

正如 Aditya Sarin 指出的那样，使用 vh 或 vw 更改 div 的大小也修复了错误。似乎重现此错误的唯一方法是将 calc() 与视口(viewport)单位和 px 值一起使用。

问题

为什么将 calc() 与视口(viewport)单元一起使用似乎会导致此错误？将视口(viewport)单位与 px 值混合以创建响应式 rem 大小通常被认为是不明智的吗？

最佳答案

我不确定这是否是一种错觉，但在尝试了问题中给出的 border-radius 方法和 background-image radial-gradient (结果更差)后，我认为使用实心圆 Unicode 字符会更好结果。

所选择的字体是否会改变事物需要试验，抗锯齿设置是否会产生影响也是如此。这是一个带有 border-radius 和 character 方法的片段，因此可以比较它们。一个字符可能会给出更好的结果，因为字体设计师会了解如何尽可能地平滑事物。尝试使用更大的 Unicode 填充圆圈并缩小它也可能是值得的。

html {
  font-size: calc(10vmin + 1px);
}

.circle {
  height: 1rem;
  width: 1rem;
  background-color: blue;
  border-radius: 50%;
}

<html>
  <div class="circle"></div>
  <div style="color:blue; font-size: 2.4rem;">&#9679;</div>
</html>

关于html - 用 rem 和 vmin 设置的圆尺寸在小尺寸时被压扁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66272286/

26

4

0

文章推荐：尝试解压缩时 Python LZMA Corrupt data error

文章推荐： r - 基于 p 值显示 LM

jquery - 表列被 scollbars 压扁
我知道以前也有人问过这个问题，但似乎没有答案适用于我。我在 DIV 容器中有一个表。当表格内有 5 行时，会显示 x 轴上的滚动条，但是，您可以看到第 1 列中的内容被压扁了。第 2 列和第 3
ios - UISearchbar 被 UINavigationbar 压扁
我在导航栏中设置了一个搜索栏作为标题 View 。在初始 View 中，搜索栏在中间均匀分布，两侧都有按钮。在此 View 中，后退按钮会插入搜索栏，使其变得不均匀。我尝试删除后退按钮的文本，但仍然无
python - 如何通过 DataFrame 压扁 Pandas group？
我有一个按日期和“结果”分组的 Pandas DataFrame: api_logs.groupby([api_logs.index.date, 'Outcome']).size()

首页

博学

6Ren·AI

商城

html - 用 rem 和 vmin 设置的圆尺寸在小尺寸时被压扁

问题

疑难解答

问题