结合使用“ rem”和“ vw”创建灵活的网站

Question

使用以下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;
}

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

但问题是，我从来没有在野外看到它，我想知道为什么？ 这种方法有什么缺陷吗？为什么不一般使用它呢？

Answer 1

原则上，这很好。但是实际上，它至少存在以下问题：

• 并非所有字体都适合所有大小，并且并非所有浏览器都能很好地近似它们。大多数问题出现在元素开始动画时，由于逼近技术，动画进行过程中文本看起来模糊。更糟糕的是，对页面中的其他元素进行动画处理会影响未设置动画（不应让步）的文本，从而产生怪异的效果。 （即：打开/关闭菜单时文本模糊...）。 要解决此问题，已针对font-size中表示的px的值对一些有问题的字体进行了优化（它们在15px和16px上表现很好-在{{ 1}}）。模糊效果仍然会发生，但是在某些值上并没有那么明显。
• 该技术在狭窄的移动设备上需要例外。即使在狭窄的屏幕上，也需要能够阅读文字

除此之外，Bootstrap 4确实将15.5px用于rem。他们也尝试在v3中做到这一点，但由于对浏览器的支持不佳而被撤消。