在開(kāi)發(fā)網(wǎng)站的過(guò)程中，我們常常會(huì)遇到需要縮放頁(yè)面的情況，如何實(shí)現(xiàn)頁(yè)面的同比例縮放呢？

可以使用CSS中的transform屬性完成該功能，具體代碼如下：

html {
/* 限定最小寬度 */
min-width: 100px;
/* 限定最大寬度 */
max-width: 800px;
/* 限定最小高度 */
min-height: 100px;
/* 限定最大高度 */
max-height: 800px;
/* 縮放 */
transform: scale(var(--scale));
/* 設(shè)置默認(rèn)縮放 */
--scale: 1;
}

上述代碼中，我們使用了CSS變量，其默認(rèn)值為1，表示頁(yè)面不進(jìn)行縮放。

當(dāng)我們需要進(jìn)行同比例縮放的時(shí)候，只需設(shè)置該變量的初始值，并在JavaScript中動(dòng)態(tài)調(diào)整其值即可。

下面是使用JavaScript實(shí)現(xiàn)同比例縮放的代碼：

const scaleValue = 0.8; // 設(shè)置縮放比例
const htmlEl = document.querySelector('html');
htmlEl.style.setProperty('--scale', scaleValue);

上述代碼中，我們使用JavaScript獲取HTML元素中的CSS變量，并設(shè)置為指定的縮放比例。

這樣，頁(yè)面就可以實(shí)現(xiàn)同比例縮放的效果了。