526互联

vue cli2 3 4使用lib-flexible px2rem完美解决移动端适配问题

发布时间 2023-10-12 10:51:25作者: 李云蹊

安装 lib-flexible

$npm install lib-flexible --save
lib-fiexble, lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时，它便不再生效， lib-flexible要配合postcss-px2rem-exclude一起使用

安装 postcss-px2rem-exclude

使用postcss-px2rem-exclude自动将css中的px转换成rem

$npm install postcss-px2rem-exclude --save

Vue Cli 2.x 使用方法

找到根目录中的 .postcssrc.js 添加以下代码，添加完以后重新 重启服务npm run dev就好了，在浏览器控制台就可以看到之前设置的font-size自动转换成rem了

"postcss-px2rem-exclude": {  
      remUnit: 75,
      exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
 }

图片示例：

 

Vue Cli 3.x 使用方法，同样也是安装上面两个插件

$npm install lib-flexible --save
$npm install postcss-px2rem-exclude --save

在根目录里面找vue.config.js, 如果没有找到创建一个，添加以下代码， 添加完后重新启动npm run serve服务

css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem-exclude')({
                        // 以设计稿750为例， 750 / 10 = 75
                        remUnit: 75,
                        "exclude":/node_modules/i //忽略 node_modules 目录下的所有文件
                    }),
                ]
            }
        }
    }

图片示例：

Vue Cli 4.x 使用方法，同样也是安装上面两个插件

$npm install lib-flexible --save
$npm install postcss-px2rem-exclude --save

在 cli 4.x 中 跟 vue cli3 使用方法一样