Html 浏览器字体大小调整的变通方法（使用rem）

我一直在使用rem大小调整而不是px来进行所有样式设置，并且注意到如果用户将浏览器字体大小更改为较小，则会删除边框

这里有一个链接作为参考，只需将浏览器文本设置从中更改为小，第一个div是rem，第二个是px

---

事实上，在我看来，你不应该使用rem来表示边界大小（除了一些罕见的情况）。特别是如果你想有一个发际线边界，那么使用1px。在像素真正有意义的地方使用像素没有错

我们在大型web项目中使用了带像素回退的rem，但从未对边框大小使用过rem（但在大多数情况下，我们只使用了发际线边框）。在我看来，与字体相关的单位（rem、em、ch）应该用于与内容相关的元素，例如字体大小和使用填充/边距的内容元素之间的负间距

---

有时甚至rem也不是最好的解决方案。它们之所以伟大，是因为与em相比，它们是可预测的，但你也失去了很多动力。最近，我们在组件级别（文章、产品摘要等）上设置rem字体大小，然后在组件的子元素上使用em。这使您可以灵活地在组件级别更改rem字体大小，以缩放整个组件内容。

一种解决方法是使用框阴影：

---

你能澄清你的问题是什么吗？.1rem基于字体大小，一旦字体大小足够小，使.1rem小于一个像素，它就太小了，看不见。将边框大小更改为.2rem，它会重新出现或定义div高度/宽度。似乎边框的.1rem太小，因此在字体缩小div大小时会隐藏起来。

* {
    padding: 0;
    margin: 0;
}

html {
    font-size: 10px;
}

body {
    padding: 10px;
}

div:first-of-type {
  background-color: white;
  box-shadow: 0 0 0 0.1rem red;
  margin-bottom: 2rem;
  padding: 0 1.6rem;
}

div:last-of-type {
  background-color: white;
  border: 1px solid red;
  padding: 0 16px;
}