vue2移动端适配方案

首先把安装amfe-flexible

npm i amfe-flexible -S

再安装 postcss-pxtorem （postcss-pxtorem会将px转换为rem）

npm install --save postcss-pxtorem@5.1.1

在项目入口文件main.js 中引入amfe-flexible

import 'amfe-flexible'

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

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

工程化项目根路径下创建 postcss.config.js 文件 (Vue CLI 内部使用了 PostCSS,默认开启了autoprefixer (浏览器前缀规则) )

module.exports = {
    module: {
        rules: [{
            test: /\.vue$/,
            use: 'vue-loader'
        }, {
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                'scss-loader'
            ]
        }, {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
            ]
        }]
    },
    plugins: {
        'autoprefixer': {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ]
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

移动端防止大屏幕字体过大

export function initRootFontSize() {
    let init = ()=> {
        let w = document.documentElement.offsetWidth || window.innerWidth;
        if(w >= 375) 
        document.documentElement.style.fontSize="37.5px";
    }
    window.addEventListener('resize',init);
    window.addEventListener('load',init);
    init();
}