Question

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

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

Answer 1

实际上你不应该在我看来使用rem作为边框尺寸（除了一些罕见的情况）。特别是如果你想要一个发线边框，那么使用1px。使用实际有意义的像素没有任何问题。

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

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

Answer 2

一种解决方法是使用box-shadow：http://jsfiddle.net/KsW2s/。

* {
    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;
}

浏览器字体大小调整的解决方法（使用rem）

2 个答案: