lib-flexible适配（移动端适配）

前言

相信大多数移动端前端开发者都是用过lib-flexible来作为移动端适配的解决方案。lib-flexible是淘宝项目组开发出来的一个小插件，属于开源项目，可以在各类项目中引入并使用，为移动端的开发者带来了无穷的便利。

关于lib-flexible

1. 解读

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时，它便不再生效。

2. 移动端适配步骤

一般而言，lib-flexible并不独立出现，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem。以下为它在vue中的使用。

2.1 安装 lib-flexible

2.2 引入 lib-flexible

在main.js中引入lib-flexible

2.3 安装 px2rem-loader

2.4 配置 px2rem-loader

分两种情况： vue-cli 2.x 和  vue-cli 3.x

2.4.1 第1种

如果是2.x版本。

在build/utils.js中，找到exports.cssLoaders，作出如下修改：

继续找到generateLoaders中的loaders配置，作出如下配置：

重新npm run dev，完成。

2.4.2 第2种

如果是3.x版本。由于3.x版本需要自己配置，在项目根目录新建文件vue.config.js，然后如下配置：

然后，重新npm run dev，完成。

转载原文：https://www.jianshu.com/p/79be33f2ce88