vue3 配置H5响应式--rem

我们是针对vue3写H5页面响应式配置rem，一般常使用[postcss]-pxtorem 将px转化为rem。

一、rem插件安装

1. 首先我们需要安装vue插件 postcss

   npm install postcss-pxtorem -D

2. 在安装 autoprefixer 自动补全css浏览器前缀

   npm install autoprefixer@9.8.6

3. 兼容手机端进行适配

   npm install lib-flexible --save

   在mian.ts中引入就可以使用

   import 'lib-flexible'

4. 使用less书写css

   安装less npm i less --save-dev

   安装less-loader npm install less-loader@7.3.0 --save-dev

   （less版本必须跟autoprefixer版本对应上）

二、vue3中针对postcss的配置

在文件中创建一个postcss.config.js文件

module.exports={
pugins:{
    autoprefixer:{  //css兼容前缀
        overrideBrowserslist:[
            'Android 4.1',
            'iOS 7.1',
            'Chrome >31',
            'not id <=11'
        ]
    },
    "postcss-pxtorem":{
        'rootValue':75, //这个值为设计稿的宽
        'unitPrecision':6, // 转化为rem后保留的小数
        'replace':true, //rem替换px
        'mediQuery':true, //兼容媒体查询 允许在媒体查询中转换px
        'minPixelValue':1, //设置要替换的最小像素值
        'exclude':/node_modules/i //node_modules
    }
}

}