Vue 适配移动端 使用 postcss-pxtorem lib-flexible 插件 转px为vw rem

vue项目使用Vant框架Rem适配（postcss-pxtorem、lib-flexible ）的安装使用

1.安装：

使用的是vue-cli+webpack，通过npm来安装的

npm i postcss-px2rem lib-flexible --save-dev
或者
yarn add postcss-px2rem lib-flexible

  

 

  
1
  
2
  
3
 

2.引入lib-flexible

在main.js中引入lib-flexible

//导入rem 的 js,动态的设置了不同屏幕的html根元素的 font-size
 
import "lib-flexible"

  

 

  
1
  
2
  
3
 

3.在plublic中index.html删除meta标签：

通过meta标签，设置设备宽度以及缩放比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
flexible会根据屏幕页面自动添加<meta name="viewport"> 标签，动态控制initial-scale,maximun-scale,minimun-scale等属性的值


  

 

  
1
  
2
  
3
 

4.安装postcss-pxtorem

一款 postcss 插件，用于将单位转化为 rem 只是用来把单位转化为rem 没别的了

npm install postcss-pxtorem -D

  

 

  
1
 

5.配置vue.config.js：

module.exports=function(){
    devServer:{
        port:3000,
        open:true
    },
    //rem配置
    css: {
        loaderOptions: {
          css:{},
          postcss: {
              plugins: [
                  require('postcss-px2rem')({//这里是配置项，详见官方文档
                      remUint:37.5,
                      propList: ['*'], //设置px转换成rem的属性值，*表示所有属性的px转换为rem
                  }),
              ]
          }
        }
      }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

如果没有配置vue.config.js，可以在build/vue-loader.config.js配置：

const precss = require('precss')
const pxtorem = require('postcss-px2rem')
module.exports = {
  ......
  postcss:[
      precss(),
      pxtorem({
          remUnit: 37.5, //设计尺寸
          propList: ['*']//自动转化rem
      })
  ],
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

6.当配置完之后，只需要重启下服务，就自动转化为rem了

npm run dev 或者 npm run serve

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/108245998