移动端页面适配

 第一步: 设置理想视口

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

第二步: 页面监听网页宽度 

// 拿到html元素
const htmlDom = document.documentElement

// 改变的函数
function serRemFontSize() {
    // 拿到屏幕的宽度
    const htmlWidth = htmlDom.clientWidth
    // 计算fontsize的大小
    const htmlFontSize = htmlWidth / 10
    // fontsize赋值到html上
    htmlDom.style.fontSize = htmlFontSize + 'px'
}

// 第一次进来时主动调用一下
serRemFontSize()

// 实时监听屏幕尺寸改变的函数
window.addEventListener('resize', serRemFontSize)

// 监听页面跳转(前进或者后退),重新设置一下
window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
        serRemFontSize()
    }
})

第三步: px --> rem