移动端配置Rem 布局适配

一、原生项目

var designWidth = 750;  //设计稿的宽度
//初始化
resize();
//兼容不同机型
const event = 'onorientationchange' in window ? 'onorientationchange' : 'resize';
window.addEventListener(event, resize, false);
function resize(){
    //获取浏览器的宽度
    const clientWidth =document.documentElement.clientWidth;
    const fontSize = clientWidth / designWidth * 100;
    document.documentElement.style.fontSize = fontSize+"px";
}
designWidth 可以自定义，使用的时候和UI稿的尺寸保持一致，把对应的大小除以100就可以转换为相应的rem为单位的值。
例如：24px=0.24rem

二、vue3+vite项目

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

1、安装

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

2、在main.js入口文件引入

import 'amfe-flexible'

3、在vite中

import postCssPxToRem from 'postcss-pxtorem';
 plugins.push(
    postCssPxToRem({
      rootValue: 37.5,// (Number | Function) 表示根元素字体大小或根据[`input`](https://api.postcss.org/Input.html)参数返回根元素字体大小
      unitPrecision: 5, // 允许REM单位增长到的十进制数字,小数点后保留的位数。
      propList: ['*'],
      exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      selectorBlackList: ['vant-'], // 要忽略并保留为px的选择器，我使用的UI框架为vant 所以这里会配置vant-
      mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
      minPixelValue: 1, // 设置要替换的最小像素值
    })
  );

如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为: 设计稿大小/10

配置好以后直接在在样式中使用px单位，会自动被转化为单位为rem

具体配置说明参考下图：

image.png

4、遇到的问题

①、配置了 selectorBlackList: ['vant-'] 以后，UI框架vant中的组件的展示还是以px为单位，自适应布局会有问题。如果自定义去更改样式的时候， 需要转化为rem单位。
②、为什么不干脆把vant中的样式也转化为rem为单位的布局那，会有很大的兼容问题，尤其是在12及以上的ios机型上面。
③、在入口的html文件中添加了骨架屏，样式