HLJ 发布于
2022-11-21 21:45:44

移动端适配方式 postcss-pxtorem

下一篇文章:

Shell学习笔记

vue项目使用postcss-pxtorem

1、安装 postcss-pxtorem依赖

npm install postcss-pxtorem

2、src目录下新建rem.js文件 内容如下:

const baseSize = 37.5 //跟postcss.config.js中rootValue的值是一致的
// 设置 rem 函数
function setRem () {
    // 当前页面宽度相对于 375 宽的缩放比例,可根据自己需要修改。  vantUI使用的是375px页面宽,这里使用375px
    const scale = document.documentElement.clientWidth / 375
    // 设置页面根节点字体大小 最高为两倍图 即设计稿为750
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

3、main.js引入rem文件

import './rem'

4、根目录下新建 postcss.config.js文件 内容如下:

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 37.5, // 已设计稿宽度375px为例 vant用的是375的设计稿
            propList: ['*'],
        },
    },
};

5、重启服务

当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2022-11-21/626.html
最后生成于 2022-11-21 22:22:46
下一篇文章:

Shell学习笔记