<分区>
通过以下 CSS，我得到了一个精确的、按比例缩放的布局:
html {
font-size: 1vw;
}
body {
font-size: 1.6rem; // 16px @ 1000px screen width
}
.some-div {
padding: 2rem; // 20px @ 1000px screen width
}
我喜欢这种方法的一点是，我可以在媒体查询之间保持一致的比率。因此，例如，无论是 480 像素、460 像素还是 440 像素宽，结果(文本、换行符/连字符、比例)在每部智能手机上看起来都完全一样。
在较大的屏幕上，我只是将根字体大小设置为固定单位，因此 UI 不会变得“太粗”并且表现得像传统网站:
html {
font-size: 16px;
}
不需要数百或数千行“响应代码”，就像您通常在 Bootstrap 网站和其他“传统工作流程”中看到的那样。 如果我不需要按比例缩放，我什至会使用这种方法。仅仅是因为我已准备好在某个时候需要它时使用它。
但问题是，我从未在野外见过这种情况，我想知道为什么？ 这种方法有什么缺陷吗？为什么不一般地使用它？