移动端---在vant中使用postcss-pxtorem 和lib-flexible 实现rem布局适配

移动适配指的是在屏幕宽度不同时，网页元素尺寸不同（等比缩放）

1.postcss（是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位）

1.介绍

PostCSS是一个处理CSS的处理工具，本身功能比较单一，它主要负责解析CSS代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如:
①Autoprefixer插件可以实现自动添加浏览器相关的声明前缀

②PostCSS Preset Env插件可以让你使用更新的CSS语法特性并实现向下兼容

 ③postcss-pxtorem可以实现将px转换为rem

目前PostCSS已经有200多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的PostCSS 插件。
Postcss一般不单独使用，而是与已有的构建工具进行集成。
vue CLl默认集成了PostCss，并且默认开启了autoprefixer插件。
 

2.postcss的安装（可以在vant官网的进阶用法查看）

使用npm安装

npm install postcss postcss-pxtorem --save-dev

3.postcss的配置（可以在vant官网的进阶用法查看）

在项目根目录新建postcss.config.js文件进行配置

module.exports = {
    plugins: {
        //配置使用autoprefixer插件
        //作用:生成浏览器CSS样式规则前缀
        // VueCLI内部已经配置了autoprefixer插件
        //所以又配置了一次，所以产生冲突了
        // 'autoprefixer ': { // autoprefixer插件的配置
        //1配置要兼容到的环境信息
        //browsers:[ 'Android >= 4.0 ' , 'i0s >=8'] ,

        //配置使用postcss-pxtorem插件
        //作用:把px转为rem
        'postcss-pxtorem': {
            // res.file 就是要处理的包含css的文件
            // lib-flexible的 REM适配方案:把一行分为10 份，每份就是十分之一所以 rootvalue应该设置为你的设计稿宽度的十分之一
            // 我们的设计稿是 750，所以应该设置为750 / 10 =75
            //但是 Vant建议设置为 37.5，为什么?因为Vant是基于37.5写的
            // 所以必须设置为37.5，唯一的缺点就是使用我们设计稿的尺寸都必须/2
            //有没有更好的办法?
            // 如果是Vant的样式，就按照37.5来转换如果是我们自己的样式，就按照75来转换通过查阅文档，我们发现 rootValue支持两种类型:
            // 数字:固定的数值
            // 函数:可以动态处理返回
            // postcss-pxtorem处理每个CSS文件的时候都会来调用这个函数它会把被处理的cSS文件相关的信息通过参数传递给该函数
            rootValue(res) {
                return res.file.indexOf('vant') !== -1 ? 37.5 : 75
            },
            // * 代表转换css的所有属性
            propList: ['*'],
            //配置不要转换的样式资源
            exclude: 'github-markdown'
        }
    }
}

 2.lib-flexible（用于设置 rem 基准值）

将网页等分成10份， HTML标签的字号为视口宽度的 1/10

1.使用npm安装（可以在vant官网的进阶用法查看）

npm i amfe-flexible

2.使用

// 导入动态设置rem基准值
import 'amfe-flexible'

3.总结：

在vant中使用postcss-pxtorem 和lib-flexible 实现rem布局适配就能实现移动端在各种手机尺寸的适配