问题

Question

问题

我正在尝试将我的根 font-size 设置为在 vmin 函数中使用 px 和 calc()。当使用 height 设置圆 div 的 width 和 rem 时，所述圆在小尺寸时被“压扁”（参见下面的照片和链接）。当检查 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() 与视口单位和 px 值一起使用。

问题

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

Answer 1

我不确定这是否是一种错觉，但是尝试了问题中给出的边界半径方法和背景图像径向渐变（结果更糟）我认为使用实心圆 Unicode 字符会更好结果。

所选择的字体是否会改变事物需要实验，抗锯齿设置是否会有所不同。这是带有边界半径和字符方法的片段，因此可以比较它们。一个字符可能会给出更好的结果，因为字体设计师将了解如何尽可能地平滑事物。也可能值得尝试更大的 Unicode 实心圆并缩小它。

struct RefLink{
    uint32_t rCounter; //4 bytes
    uint64_t blockposition; // 8 bytes
};

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

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

Answer 2

您可以尝试使用 vh 和 vw

指定维度

圆形尺寸设置为 rem 和 vmin 以小尺寸压缩

问题

问题排查

问题

2 个答案: