场景描述
项目一开始说要适配1366和1920,做好页面后说需要适配960.
解决方案
代码改动量最小的方法就是缩放。transform:scale();
获取宽度判断是960的就缩放
js
if(document.documentElement.clientWidth === 960){
this.scale = true;
}
template
<div id="app" :class="scale?'scale':''">
// ....
<div>
css
.scale{
transform:scale(0.7028);
-webkit-transform:scale(0.7028); /*兼容-webkit-引擎浏览器*/
-moz-transform:scale(0.7028); /*兼容-moz-引擎浏览器*/
}