移动端适配

原文链接：https://blog.csdn.net/weixin_39602178/article/details/126034059

1.rem方案

安装插件

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

在main.js中引入amfe-flexible

import 'amfe-flexible';

在postcss.config.js文件中配置postcss-pxtorem

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'] // 需要被转换的属性
    }
  }
}
​

public/index.html添加viewport元数据标签，使页面宽度和设备宽度一致

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
​
<!--
含义如下：
* width=device-width：视口宽度和设备保持一致
* initial-scale=1：视口的默认缩放比例1.0
* maximum-scale=1：最大缩放比例1.0
* minimum-scale=1：最小缩放比例1.0
* user-scalable=no：不允许用户自行缩放
-->
​

2.viewport方案

public/index.html添加viewport元数据标签，使页面宽度和设备宽度一致,代码同上

安装插件

npm install postcss-px-to-viewport --save-dev

在postcss.config.js文件中配置postcss-px-to-viewport

module.exports = ({ file }) => {
  const vwUnit = file && file.indexOf('vant') !== -1 ? 375 : 750;
  return {
    plugins: {
      'postcss-px-to-viewport': {
        viewportWidth: vwUnit, // 设计稿的宽度
        unitPrecision: 5, // 转换后的位数，即小数点位数
        viewportUnit: 'vw', // 转换成的视窗单位
        propList: ['*'], // 要进行转换的属性，如果某个属性不进行转换，只需在其前加个“!”即可
        selectorBlackList: [], // 不进行转换的选择器
        minPixelValue: 1, // 小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      },
    },
  };
};
​