移动端css

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

rem布局

(function(){
    var screenW = document.documentElement.offsetWidth||document.body.offsetWidth;
    var oHtml = document.getElementsByTagName("html")[0];
    oHtml.style.fontSize = 100*(screenW/750)+"px";
})();

使用插件rem布局

cnpm i lib-flexible 
cnpm i postcss-plugin-px2rem -D

main.js引入

// 不再维护，不推荐使用这种方式，但是小项目也无妨
import 'lib-flexible/flexible.js'

vue.config.js中的配置

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
	publicPath: process.env.NODE_ENV === 'production'
		? '/mooc-mogujie/'
		: '/',
    css: {
		loaderOptions: {
			postcss: {
				plugins: [
					require('postcss-plugin-px2rem')({
						rootValue: 75, //取设计稿尺寸的1/10
						exclude: /(node_module)/,//不去处理node_module模块
						minPixelValue: 3,//3px以下的不去做rem布局处理
						selectorBlackList:['van']
					})
					// require('postcss-px-to-viewport')({
					// 	viewportWidth: 750,
					// 	exclude: /(node_module)/,
					// 	unitPrecision: 3,
						// selectorBlackList:['van']
					// })
				]
			},
			scss: {
				prependData: `
					@import "@/style/gobal.scss";
        `
			}
		}
	},

}