Vue移动端适配方案--插件版

插件介绍

• postcss-pxtorem:将px转换为rem
• amfe-flexible：为html、body添加font-size，窗口调整时候重新设置font-size
• autoprefixer 为css添加兼容性前缀

一、安装插件

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

安装报错解决，版本兼容性问题，指定安装版本

npm install postcss-pxtorem@5.1.1 --save-dev
npm install amfe-flexible@2.2.1 --save

二、使用

2.1. main.js 引入amfe-flexible

// 导入js文件 根据窗口调整html-font-size大小
import "amfe-flexible";

2.2. 根目录创建postcss.config.js配置文件

注意：

• 如果是 Vue3 + Vite 需要把.js改为.cjs
• 安装autoprefixer, 否则编译会报错
• 如果使用了vantUI， rootValue一定要设置为37.5，因为vant组件就是根据375px设计的，至于你的设计稿怎么换成375px，更改蓝湖的设计稿指定宽度为375即可

module.exports = {
  plugins: {
    // 为css添加兼容性前缀
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      // 设计稿宽度的1/10  如375px-->37.5
      rootValue: 37.5,
      // 需要做转化处理的属性，如hight、width、margin.. *代表全部
      propList: ["*"],
      // 精度
      unitPrecision: 5,
    },
  },
};

三、Vue2.7版本以上，postcss-pxtorem这个插件不可以将行内style样式的px转成rem

3.1. 如何解决

3.2. 封装一个工具类

/**
 * 解决postcss不能将行内样式转为rem的问题
 * @params { Number | String } px 需要转换的像素值（Number） 也可以是百分数（String）
 * @return 如果是百分数不做处理 如果是像素值 手动转rem
 * 37.5 就是postcss.config.cjs配置文件的rootValue
 *  */
export function px2rem(px) {
  if (/%/gi.test(px)) return px;
  else return parseFloat(px) / 37.5 + "rem";
}

3.3. 挂载到全局

import { px2rem } from "@/utils/index";
import App from "./App.vue";
const app = createApp(App);
app.provide("px2rem", px2rem);

3.4. 使用

<script setup>
import { inject } from "vue";
const px2rem = inject("px2rem");
</script>

<nav class="m-nav" :style="{ top: px2rem(top) }"></nav>