原生js实现等比缩放页面

2023-05-30 18:33| 来源: 网络整理| 查看: 265

常用的方法：

//监听window事件 window.addEventListener('load', adaptation); window.addEventListener('resize', adaptation); function adaptation () { var w = document.body.clientWidth; var h = document.body.clientHeight; var nw = 1920; nh = 1080; var left, top, scale; if (w / h > nw / nh) { scale = h / nh; top = 0; left = (w - nw * scale) / 2; } else { scale = w / nw; left = 0; top = (h - nh * scale) / 2; } document.getElementById('main').setAttribute('style', 'transform: scale('+ scale +');left:'+left+'px;top:'+top+'px;'); }

简单的方法：

为需要进行缩小的元素添加一个类或id，例如：

2. 在CSS中为该元素添加如下样式：

.zoom { transform: scale(0.8); /* 缩小比例，可以根据实际情况进行调整 */ transform-origin: 0 0; /* 缩放起点，可以根据实际情况进行调整 */ }

3. 如果需要实现页面自适应，可以在JS中动态计算缩放比例，并将其应用于所需元素，例如：

var zoomRatio = window.innerWidth / 1920; /* 1920是设计稿宽度，可以根据实际情况进行调整 */ document.querySelector('.zoom').style.transform = 'scale(' + zoomRatio + ')';

这样就可以实现页面等比例缩小了。

【本文地址】

公司简介

联系我们