像素转rem适配大屏

前言

项目UI设计稿1920*1080适应不同分辨率

抛弃设置zoom方案，会引发很多问题包括点击错位等

把px转成rem或者px转成vw

😱😱😱

搞！

  首先我是在vue2下开发

  安装postcss-pxtorem版本用的5.1.1，因为用6.0.0需要额外安装最新的postcss8.0

npm i postcss-pxtorem@5.1.1 -D

  然后再配置下vue2的项目vue.config.js 文件

  css下loaderOptions postcss中添加配置

postcss: {
    plugins: [
        require('postcss-pxtorem')({
            rootValue: 16, // 换算的基数
            selectorBlackList: [], // 忽略转换正则匹配项
            propList: ['*']
        })
    ]
},

配置文档：

pxtorem文档

   在代码中根据不同分辨率设置根元素html的font-size

window.addEventListener('resize', () => {
    this.zoomChange()
})
-----------------------------------------------------------------------------------------------------------------------------------------
zoomChange() {
    // baseSize与上面配置的rootValue相同，因为转换设置16px = 1rem
    const baseSize = 16
    const scale = document.documentElement.clientWidth / 1920
    document.documentElement.style.fontSize = baseSize * scale + 'px'
}

  这种情况对于大于1080p分辨率的屏幕比如4k支持较好，对于小于1080p分辨率，比如1280*720的可能会有一些问题，比如浏览器限制字体不能小于12px。

  也可以使用媒体查询@media来动态设置html的font-size。

一些思考

  感觉前端对于不同分辨率的兼容方式很多，移动端或者pc端。。。采用什么方式最优解并没有什么统一的方式，采用rem统一缩放这种方式目前也发现一些问题，就是字体大小不能小于12px，所以需要一个更完美的解决方案，持续探索中。

  extra: 打算最近整理下数据结构和算法的基础知识，希望不要半途而废。之后会开始整理vue设计与实现相关内容。🌝