vue@cli3适配h5页面

1.在public里面的index.html添加

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

2.vue-cli3.0结合lib-flexible, px2rem 实现移动端适配。
第一部分：项目中引入 lib-flexible

npm install lib-flexible --save

3.在项目的入口 main.js 文件中引入 lib-flexible

import ‘lib-flexible’

第二部分：使用postcss-px2rem自动将css中的px转换成rem

npm install --save-dev postcss-loader postcss-px2rem

在 vue.config.js 中配置（如果没有自己手动创建）

module.exports = {
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                // options here will be passed to postcss-loader
                plugins: [require('postcss-px2rem')({
                    remUnit: 75 //说明1rem为75px
                })]
            }
        }
    }
}

**2.使用 postcss-px-to-viewport 注意：移动端用方便，不过在pc端会出新字体过大的现象

npm install postcss-px-to-viewport 或者 yarn add postcss-px-to-viewport

package.json中，在postcss中添加代码：**

"postcss": {
    "plugins": {
    "autoprefixer": {},
    "postcss-px-to-viewport": {
         "viewportWidth": 750,
         "minPixelValue": 1
        }
    }
},