媒体查询 + rem适配方案

流式布局适配方式：
1、只达到宽度的适配
2、内容没有自适应改变高度，高度也没有自适应改变

rem适配方式：
1、高度和宽度都自适应 内容可自适应 等比例缩放
2、当我在改变rem的基准值html的字体大小的时候，页面上的容器在等比例缩放

在vue:
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})

// rem适配
function setRem() {
var whdef = 20/1920;// 表示1920的设计图,使用100PX的默认值
var bodyWidth = document.body.clientWidth;// 当前窗口的宽度
var rem = bodyWidth * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
document.getElementsByTagName(‘html’)[0].style.fontSize = rem + ‘px’;
}
window.addEventListener(‘load’, setRem);
window.addEventListener(‘resize’, setRem);