vue3移动端自适应方案

移动端自适应目前主要有torem和toviewport两种方案，如果项目需要在宽屏上使用时优先使用rem，其他情况优先使用viewport（注意：是二选一方案噢，别全复制去了）

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。

• viewport 方案: postcss-px-to-viewport
• rem 方案: amfe-flexible + postcss-pxtorem

一.依赖安装

viewport 方案(推荐)

• postcss-px-to-viewport:自动将 px 转为 viewport

npm install @ttou/postcss-px-to-viewport -D

rem 方案

• amfe-flexible(有宽屏显示竖屏需求则使用 lib-flexible ): 自适应设置根节点字体大小

lib-flexible会自动在html的head中添加一个meta name=”viewport”的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。

• postcss-pxtorem: 自动将 px 转为 rem

npm i -S amfe-flexible
// 有宽屏显示竖屏需求则使用 npm i -S lib-flexible
npm i postcss postcss-pxtorem -D

二.配置和引入

main.js/main.ts

viewport 方案

import "normalize.css";

rem 方案

import "amfe-flexible";
// 有宽屏显示竖屏需求则使用 import "lib-flexible";
import "normalize.css";

根目录创建postcss.config.js

 viewport 方案

module.exports = {
  plugins: {
    "@ttou/postcss-px-to-viewport": { // 配置详情可见 https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0
      unitToConvert: "px",
      viewportWidth: 750,
      unitPrecision: 5,
      propList: ["*"],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/node_modules/],
      include: undefined,
      landscape: false,
      landscapeUnit: "vw",
      landscapeWidth: 1920,
    },
  },
};

 rem 方案

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75; // 37.5用于兼容vant-ui，75基于750px设计稿
      },
      unitPrecision: 5,
      propList: ["*"], // 需要转换rem的元素
      // selectorBlackList: ["van-"],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0,
      exclude: /node_modules|floder_name/i,
    },
  },
};

 注意：如果运行代码阶段报CommonJS的错误，把.js后缀改为.cjs就可以编译了（viewport 方案）