Css 使用；rem“；加上；大众汽车；灵活的网站

使用以下CSS，我可以获得精确的比例缩放布局：

html {
    font-size: 1vw;
}

body {
    font-size: 1.6rem; // 16px @ 1000px screen width
}

.some-div {
    padding: 2rem; // 20px @ 1000px screen width
}

我喜欢这种方法的一点是，我可以在媒体查询之间保持一致的比率。例如，无论是480px、460px还是440px宽，每个智能手机上的结果（文本、换行符/连字符、比例）都会完全相同

在更大的屏幕上，我只需将根字体大小设置为一个固定单位，这样UI就不会变得“太粗体”，其行为与传统网站类似：

html {
    font-size: 16px;
}

不需要成百上千行的“响应代码”，就像你通常在引导网站和其他“传统工作流”中看到的那样。 如果我不需要比例缩放，我甚至使用这种方法。只是因为我已经准备好了，当我需要它的时候

但问题是，我从来没有在野外看到过，我想知道为什么？

---

这种方法有什么缺陷吗？为什么不在一般情况下使用它呢？

原则上，它很好。但在实践中，它至少存在以下问题：

• 并非所有字体都适合所有大小，也并非所有浏览器都能很好地逼近它们。当元素开始设置动画时，大多数问题都会出现，并且由于近似技术，在动画进行过程中，文本看起来模糊。更糟糕的是，设置页面中其他元素的动画会影响未设置动画（不应移动）的文本，从而产生奇怪的效果。（即：打开/关闭菜单时文本模糊…）。 为了解决这个问题，一些有问题的字体已经针对

  px

  中表示的

  font size

  值进行了优化（它们在

  15px

  和

  16px

  上看起来不错-在

  15.5px

  上就没那么多了）。模糊效果仍然会发生，但在某些值上不太明显
• 这种技术在狭窄的移动设备上需要一个例外。即使在狭窄的屏幕上，人们也需要能够阅读文本

---

除此之外，bootstrap4使用

rem

进行

填充

。他们也曾尝试在v3中实现这一点，但由于浏览器支持不佳而恢复。

我认为这不是一个很好的问题。我认为这会导致固执己见的回答，比如说，糟糕的表现不是基于意见的。嗯，这个问题很清楚，也很有用。唯一的缺点是它可能有一个明确的答案（“在场景X中，它因为Y而失败”，“直到Z年它才在99%的浏览器中可用”）或者没有。但如果你不问，你就不知道了。