移动端布局-rem vw布局

rem vw布局，实现除图片外的等比例缩放（图片如果只设置宽高，本身就是等比例的）
em和rem有什么区别
- em：‘em’的值是基于其父元素的字体大小的，由于这种相对性，嵌套的元素使用‘em’可能会导致复合效应，使计算变得复杂
- rem：‘rem’的值是基于根元素（‘通常是<html>’元素）的字体大小（默认是16px），无论元素在文档何处，‘1rem’都与根元素的字体大小相等
rem布局（需要加载js，消耗一定的性能）

　　　　思路：

　　　　　　1.把px改成rem

　　　　　　2.1rem === html的字体大小（可以自己设置）

　　　　　　3.监控屏幕尺寸，尺寸发生改变时，使用js修改html的字体大小（代码示例如下）

function setHtmlFontSize() {
    // 获取用户的手机尺寸
    const clientWidth =
        document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;
    // 计算html标签对应的字体大小
    const htmlFontSize = clientWidth / 75 + "px";
    // 通过js来动态修改html标签的字体大小
    document.documentElement.style.fontSize = htmlFontSize;
}
// 监控尺寸变化, 每次尺寸变换, 调用setHtmlFontSize函数
window.onresize = setHtmlFontSize;