vue 移动端适配

1.安装配置PostCSS插件

npm i postcss-px-to-viewport autoprefixer --save-dev

2.在根目录.postcssrc.js文件中配置一下文件没有就新建一个

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
        },
        'postcss-px-to-viewport': {
            viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: false // 允许在媒体查询中转换`px`
        }
    }
}

在index.js添加

<meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <meta name="referrer" content="never">

1.autoprefixer：用来自动处理浏览器前缀的一个插件。如果你配置了postcss-cssnext，其中就已具备了autoprefixer的功能。在配置的时候，未显示的配置相关参数的话，表示使用的是Browserslist指定的列表参数，你也可以像这样来指定last 2 versions 或者 > 5%。
2.postcss-px-to-viewport：要用来把px单位转换为vw、vh、vmi``n或者vmax这样的视窗单位，也是vw适配方案的核心插件之一