安装flexible
npm install lib-flexible --save
引入flexible
在项目入口文件main.js中添加如下代码，引入flexible
import 'lib-flexible'
px 转 rem
使用 webpack 的 px2rem-loader,自动将px转换为rem
安装px2rem-loader
npm install px2rem-loader --save-dev
配置px2rem-loader
在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置
关于importLoaders：如若有疑问，请参
在移动端Web开发中，为了实现页面的自适应布局，开发者经常使用`lib-flexible`结合`rem`单位来处理不同屏幕尺寸的适配问题。`lib-flexible`库主要是为了解决移动端设备屏幕分辨率差异性导致的显示效果不一致问题。`rem`（root em）单位则是一个相对于根元素（通常是`html`元素）的字体大小的单位，通过调整根元素的字体大小，可以方便地改变整个页面中所有使用`rem`单位的元素尺寸。
我们来看如何在基于`vue-cli`构建的项目中安装和配置`lib-flexible`。在命令行中执行以下命令来安装`lib-flexible`：
```bash
npm install lib-flexible --save
```
安装完成后，我们需要在项目入口文件（通常是`src/main.js`）中引入`lib-flexible`，代码如下：
```javascript
import 'lib-flexible'
```
接下来，我们要处理`px`到`rem`的转换，这通常通过`webpack`的`px2rem-loader`插件完成。先安装`px2rem-loader`：
```bash
npm install px2rem-loader --save-dev
```
然后，在`vue-cli`生成的配置文件`build/utils.js`中，找到并添加配置，一般是在`module.rules`数组中添加一个新的规则，用于处理CSS文件中的`px`到`rem`转换。具体配置取决于你的`webpack`版本和项目需求，但基本配置可能如下所示：
```javascript
{
test: /\.css$/,
use: [
...
{
loader: 'px2rem-loader',
options: {
remUnit: 75, // 这里的值可以根据你的设计稿基础像素来设置
remPrecision: 8 // 设置转换精度
}
},
...
]
}
```
关于`importLoaders`参数，它是指在当前loader之前应用的loaders的数量。如果不确定是否需要配置，你可以查阅`webpack`的文档或者根据项目实际情况决定。
使用`px2rem`后，编写CSS时可以直接使用`px`单位，它们会在编译过程中被自动转换为`rem`。但有一些特殊情况需要注意：
- 如果你不想某个`px`值被转换，可以在后面添加`/*no*/`，例如`1px/*no*/`，这样该值将保持不变。
- 对于字体大小，通常希望根据设备的DPR（Device Pixel Ratio）动态调整，这时可以添加`/*px*/`，例如`28px/*px*/`。在编译后，会为不同DPR的设备生成相应倍率的样式。
以下是一个简单的例子，展示了`px2rem`转换前后的情况：
```css
.selector {
width: 150px; /* 编译后转换为rem */
height: 64px; /*px*/ /* 不会被转换 */
font-size: 28px; /*px*/ /* 字体大小，根据DPR转换 */
border: 1px solid #ddd; /*no*/ /* 不会被转换 */
}
```
编译后的代码会生成不同DPR的样式：
```css
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}
```
值得注意的是，不要在`index.html`的头部添加`name`为`viewport`的`meta`标签，因为`lib-flexible`会自动为我们添加，重复添加可能会导致问题。
对于外部引入的CSS文件，`px2rem`的转换可能受到导入方式的影响。如上述示例所示，通过`<style>`标签直接引入或使用`@import`语句导入时，转换结果可能有所不同。理解这些差异可以帮助你更好地控制CSS文件的转换。
通过`lib-flexible`和`rem`单位，结合`px2rem-loader`，我们可以实现移动端的自适应布局。正确配置和使用这些工具，可以确保你的项目在不同设备上呈现一致的视觉效果。在实际项目中，还需要根据具体需求进行微调，以达到最佳的适配效果。
