自适应布局方式

一、pc自适应（以1920为标准，根据窗口放大缩小）

js监听窗口变化，代码如下：

(function(){
	function setSize(){
		let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
		let htmlDom = document.getElementsByTagName('html')[0];
		htmlDom.style.fontSize= htmlWidth / 19.20 + 'px';
	}
	setSize();
	window.addEventListener('resize', function() {
		setSize()
	})
})()

css：

.box{
	width:1rem;(=100px)

二、vue-cli中使用postcss-pxtorem

1、安装

npm install postcss-pxtorem -D

2、设置postcss.config.js（该文件为使用vue-cli3自动创建的文件）

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 16, //结果为：设计稿元素尺寸/16，因为默认情况下1rem=16px，设计稿为375px，rootValue：16，若设计稿为750px 则rootValue: 32
      propList: ['*']
    }
  }
}