6.1flexible、后css处理器

flexible

首先，在项目里新建终端，输入npm i -S amfe-flexible，下载flexible
看到node-module里是有amfe-flexible这个文件的，就说明下载好了

amfe-flexible可以自动的做到在不同的屏幕里 将一个html大小设置为屏幕大小的十分之一

再在项目里引入flexible

在项目里下载好了flexible这个插件 可以在app.vue界面验证一下 是否有效

我们用rem这个单位做移动端适配固然很好 但是一般来说设计人员的设计稿只有px这个单位
如果中途设计要换px
那你就要自己来转换 将px单位转成rem单位 写在我们样式代码里
这样就也很麻烦
所以 还是不要直接在我们的样式代码里写rem单位
我们需要写在代码里依然是px单位 但是通过某个插件 然后在我们运行代码的时候 自动的把px单位转化为rem单位
这种在我们写完css代码后对css代码进行处理的插件叫做后css处理器

后css处理器

在我们的vant2文档里 就有移动端适配的解决方案
第一个postcss-pxtorem就是就是将px单位自动转化为rem单位
第二个lib-flexible就是自动把屏幕分成十份 定义rem单位大小

在项目里使用postcss-pxtorem

1.下载postcss-pxtorem

2.输入 npm install postcss postcss-pxtorem --save-dev

下载成功后，去postcss.config.js配置文件

把代码的rem 换为px 后可以可以发现

在页面上显示

不管怎么变换大小，盒子都是占十分之一了

总结

flexible （下载 mian.js导入后 ）实现了根据屏幕不同 自动设置html字体大小
postcss-pxtorem （下载 添加配置文件后） 实现了我们写好的px单位在打包运行后变成rem单位