Vue项目中如何解决rem移动适配（lib-flexidle配合postcss-pxtorem）

1.了解什么是rem？

rem是一个相对单位，1rem=根元素html的font-size的大小。

2.使用rem做移动适配的原理？

让页面上的元素采用rem作为单位，只要改变html根元素font-size的大小，页面上所有元素都跟着变大变小。

3.实际开发中如何使用flexidle配合postcss-pxtorem解决移动适配

1.项目中安装和导入flexible 用于设置 rem 基准值。 这个包会将html根元素font-size的大小设置为屏幕宽度的十分之一，如浏览器的宽度为750px, 则 1rem = 75px， 如浏览器的宽度为1500px, 则 1rem = 150px。

// 使用yarn命名在项目中安装lib-flexible
yarn add lib-flexible

// 项目中引入lib-flexible
import "lib-flexible"

2.项目中使用postcss-pxtorem这款 PostCSS 插件，用于将 px 单位转化为 rem 单位。

// 安装postcss-pxtorem插件 （安装到开发依赖包）
yarn add -D postcss-pxtorem

安装完成之后我们在项目中新建postcss.config.js配置文件

我们会在配置文件中将rootValue的值设置为UI设计稿宽度的1/10，这样在编写代码的时候从设计稿上拷贝过来的像素，就能被转换成特定的rem值。如设计稿为750px, 我们会把rootValue的值设置为75px。假设这种情况下设计稿中某个元素的宽度为150px, 当把元素的宽度设置为150px的时候，插件自动就会用150 / 75 = 2rem作为元素的宽度，免去了我们亲自换算的过程

// postcss.config.js 
module.exports = { 
    plugins: { 
        'postcss-pxtorem': { 
            rootValue: 75,
            propList: ['*'], 
        }, 
    }, 
};

如果我们使用了Vuet组件库（Vant组件库是基于 350px 宽度实现的） 且设计稿的宽度是 750px 那么我们可以在postcss.config.js配置文件中添加如下代码

// postcss.config.js 
module.exports = { 
    plugins: { 
    // postcss-pxtorem 插件的版本需要 >= 5.0.0 
        'postcss-pxtorem': { 
            rootValue({ file }) { 
            return file.indexOf('vant') !== -1 ? 37.5 : 75; 
            }, 
            propList: ['*'], 
         }, 
    }, 
};