前端页面自适应（等比例缩放）

前端在做设计的时候，最头疼的就是页面自适应和适配，今天我分享一个非常简单的适配方案，适用于对页面分辨率要求没那么高的项目，直接复制粘贴就可以使用，代码如下：

// 等比例缩放的方法，可以放到VUE的method里 
bodyScale() {
    var deviceWidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
    var scale = deviceWidth / 1920; // 分母——设计稿的尺寸
    document.documentElement.style.zoom = scale; //放大缩小相应倍数
 },

// 监听页面的窗口的变化，每次窗口变化调用等比例缩放方法
window.addEventListener("resize", this.bodyScale, false);

 以上写法有一个bug，就是如果页面的宽高比例较大时，底部会出现空白，大家可把页面body的颜色调节成和页面颜色相同的颜色，页面看起来会比较舒服。