配置rem尺寸,适配手机端

配置rem尺寸,适配手机端

在public下建 js 文件夹 放入 rem.js

function remSize() {
    //1rem=当前页面的html的font-size的大小
    var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
    if (deviceWidth >= 750) {
        deviceWidth = 750
    }
    if (deviceWidth <= 320) {
        deviceWidth = 320
    }
    document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
    document.querySelector('body').style.fontSize = 0.3 + 'rem'
        // 设计稿是750px.
        // 设置1半的宽度，那么就是375px
        // 1rem == 100px的设计稿宽度
        // 表达一半的宽度就是3.75rem
}

remSize()

// 在不同屏幕宽度下，html的font-size大小也会跟着改变
//当屏幕宽度发生改变时,触发的事件
window.onresize = function() {
    remSize()
}

//在public\index.html中引入
<script src="<%= BASE_URL %>/js/rem.js"></script>(js前/可有可没有,看情况)