响应式-使用rem的js实现

记得这是一道阿里云出的类似的笔试题，而且很有实用价值。所以此类笔试题还是建议多一些好. 通过resize设置rem 这里是以pc端设计稿来做基准的，手机端套用就好

const resize = window.resize = () => {
    const methods = () => {
        let def = 100/1920          // 以1920的设计图为基准，使用100px作为参考，如果是手机端的设计稿就把1920换成750好了
        let w = window.innerWidth
        let rem = w*def
        document.documentElement.style.fontSize = rem + 'px'
    }
    // 做了防抖，防止频繁调整窗口大小带来的性能问题
    if (resizeTimeout) {
        clearTimeout(resizeTimeout)
        resizeTimeout = null
    }
    var resizeTimeout = setTimeout(methods, 30)
}
复制代码