html - 在响应式设计中定义 PX 与 EM 中的边框宽度

Question

我的整个样式表都是使用 em 而不是 px 完成的。整个主题都是响应式的。

我看到的唯一想要更改为 px 的是添加边框的类:

.border {
   border-width: 0.1em;
   border-style: solid;
}

0.1em 在大多数地方看起来有点厚。我想将其更改为 px:

.border {
   border-width: 1px;
   border-style: solid;
}

我知道我在这里可能过于挑剔，但是在定义边框宽度时有什么理由不应该使用 px 吗？如果是这样，有什么办法可以让 0.1em 变小一点，看起来更像 1px？

Answer 1

与其在 em 中定义它，您曾说过您不满意，不如在 px 中定义它，但将值更改为 2px 或 3px 等，因为站点通过媒体查询更改。然后你有明确的控制权。

@media screen and (min-width:30em) { .border {border:1px;} }
@media screen and (min-width:50em) { .border {border:2px;} }

缺点是如果你想要屏幕尺寸的小增量，而你的 CSS 会变成一本书的长度。那你就是太挑剔了。