#### 使用 `vw` 实现响应式布局
方法一:使用CSS计算功能
这种方法是通过CSS中的`calc()`函数来计算`font-size`的值。
/*
根据750宽度的设计稿计算font-size,即1rem = 100px;
*/
html {
font-size: calc(100vw / 7.5);
}
这种方法的好处是可以在不需要JavaScript的情况下实现响应式设计。
方法二:基于设计稿宽度计算
这种方法是通过手动计算设计稿的宽度与`vw`单位的关系来设置`font-size`的值。
/*
基于750宽度的设计稿,1rem = 100px;
*/
html {
font-size: 13.333333333vw;
}
/*
基于650宽度的设计稿,1rem = 100px;
*/
html {
font-size: 15.38461vw;
}
方法三:使用JavaScript动态调整font-size
使用JavaScript动态地调整`font-size`可以更好地控制布局,在特定条件下更改`font-size`。
(function (window, document) {
let getRem = function () {
if (document) {
let html = document.documentElement;
let width = html.getBoundingClientRect().width > 750 ? 750 : html.getBoundingClientRect().width;
let hWidth = width * (750 / 352);
html.style.fontSize = Math.ceil(hWidth / 16) + "px";
}
};
getRem();
window.onresize = function () {
getRem();
}
})(window, document);