解决vue移动端适配问题

发表于 更新于 分类于

首先把安装 amfe-flexible，这里使用 npm install

1
npm i -S amfe-flexible

在入口文件 main.js 中引入

1
import "amfe-flexible/index.js";

在根目录的 index.html 的头部加入手机端适配的 meta 代码

1
2
3
4
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>

安装 postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

ps：前提是 ui 设计的 psd 图尺寸大小是 750*1334，这样我们在 iphone6 的模拟机上直接使用所标注的尺寸

1
npm i postcss-pxtorem --save-dev

在 package.json 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"postcss": {
  "plugins": {
    "autoprefixer": {
      "browsers": [
        "Android >= 4.0",
        "iOS >= 7"
      ]
    },
    "postcss-pxtorem": {
      "rootValue": 37.5,
      "propList": [
      "*"
      ]
    }
  }
},

或者在 postcss.config.js 中配置（此文件需要在根目录下新建）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");

module.exports = ({ file }) => {
  let rootValue;
  // vant 37.5 [link](https://github.com/youzan/vant/issues/1181)
  if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
    rootValue = 37.5;
  } else {
    rootValue = 75;
  }
  return {
    plugins: [
      autoprefixer(),
      pxtorem({
        rootValue: rootValue,
        propList: ["*"],
        minPixelValue: 2
      })
    ]
  };
};