前端在做设计的时候,最头疼的就是页面自适应和适配,今天我分享一个非常简单的适配方案,适用于对页面分辨率要求没那么高的项目,直接复制粘贴就可以使用,代码如下:
// 等比例缩放的方法,可以放到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的颜色调节成和页面颜色相同的颜色,页面看起来会比较舒服。