移动端布局rem适配

（确定HTMl中的font-size大小）

REM适配是一种移动端开发中常用的适配方法。它是基于CSS中的相对单位REM（Root Em）进行布局调整，以适应不同设备的屏幕尺寸。

相对单位REM是相对于根元素（通常是HTML元素）的字体大小而言的。通常情况下，根元素的字体大小默认为16px。所以，如果你将一个元素的字体大小设置为2rem，它将相当于32px（2 * 16px）。

在REM适配中，一般会根据设备的屏幕宽度动态地计算并设置根元素的字体大小。这样可以根据屏幕的尺寸来进行响应式的布局调整。

1.创建项目  安装插件 

• yarn add postcss-plugin-px2rem -D
• yarn add lib-flexible

2.在根目录下创建  postcss.config.js  文件

3.添加如下配置

module.exports = {
    plugins: [
        require('postcss-plugin-px2rem')({
            //设计图宽度 750px -》75 430px-》43
            rootValue: 54, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            // exclude: /(page_pc)/i,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            exclude: /(node_modules|public)/i,
            // selectorBlackList: ['van-'], //要忽略并保留为px的选择器,我们一般不转换vantui中的大小
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
        }),
    ],
}

4.运行项目  yarn serve

5.在 /mian.js  文件中添加

// 引入淘宝适配方案
import "lib-flexible"

6.在  App.vue  中测试

<template>
  <div>
    <div class="box">测试盒子</div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="less">
.box{
  width: 270px;
  height: 270px;
  background-color: #a5c5d7;
  text-align: center;
  line-height: 270px;
}
</style>