【H5】 两种屏幕宽度大小自适应方式

【H5】 两种屏幕宽度大小自适应方式：

第一种

由于rem是获取html根属性的字体大小

改变html的字体大小，通过rem设置所以样式的宽高：

//rem为html的字体大小 通过改变html的字体大小达到适配的效果
 remChange();
 //监听屏幕改变resize事件 触发remChange方法
 window.addEventListener("resize", remChange)
 function remChange() {
   const html = document.querySelector("html");
   const width = html.getBoundingClientRect().width; //拿到适配器的宽度值
    //若屏幕宽为375px则1rem = 100px 若不是则按比例增大或减小
   html.style.fontSize = width / 3.75 + 'px';
 }

第二种

将宽度固定为750px;

通过获取屏幕宽度与750的比例关系将所有样式宽高按照相对应的比例缩放：

remChange();
window.addEventListener('resize', remChange);
function remChange() {
    remove();
    let width = window.screen.width;
    let fixedw = 750;
    let scale = width / fixedw; //获取到的屏幕宽度比上自定义的750宽度 获得对应比例
    let meta = document.createElement("meta");
    meta.setAttribute('name', 'viewport');
    //将对应比例填入meta标签即可实现宽度自适应
    meta.setAttribute('content', `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`);
    //meta将标签添加到文档中即可
    document.head.appendChild(meta);
}
function remove() {
    let meta = document.querySelector("meta[name='viewport']");
    if (meta != null) {
        document.head.removeChild(meta);
    }
}