如何避免分数 rem 值小于 1px？答案

【问题标题】：How to avoid fraction rem value to be less than 1px?如何避免分数 rem 值小于 1px？
【发布时间】：2021-09-04 00:03:42
【问题描述】：

假设我们有一个使用calc CSS 函数动态计算字体大小的项目。此外，我们希望有一个边框，其宽度将以rem 表示（相对于字体大小）。

在某些情况下，边框宽度的像素大小小于 1px，因此无法渲染。

如何设置边框宽度不小于1px？

【问题讨论】：

【解决方案1】：

通常，大多数现代浏览器不完全支持设置 min()，但请查看 CSS 4 规范；有max 和min 的函数。

例子：

.type {
  /* Set font-size to 10x 
  the average of vw and vh,
  but don’t let it go below 12px. */

  font-size: max(10 * (1vw + 1vh) / 2, 12px);
}

或者，您可以使用 CSS 预处理器甚至后处理器来从计算中最小化值；

【讨论】：