在移动互联网时代，网页设计不仅要美观，还要兼顾不同设备的屏幕尺寸。今天就来聊聊如何用 JavaScript 实现页面的自动缩放功能！🌟

首先，我们可以通过监听浏览器窗口的大小变化事件 `resize` 来动态调整页面的比例。比如：

```javascript

window.addEventListener('resize', () => {

const width = window.innerWidth;

const scale = width / 1920; // 假设目标宽度为1920px

document.body.style.transform = `scale(${scale})`;

});

```

上面这段代码会根据屏幕宽度实时计算缩放比例，并应用到整个页面上，让内容始终适配屏幕！🎯

不过需要注意的是，过度缩放可能会影响用户体验，因此建议结合媒体查询和视口单位（vw/vh）来优化细节。📱🔥

快来试试吧！只要一点点代码调整，就能让你的网站像变魔术一样，无论在哪种设备上都展现最佳状态！💡✨

前端开发 响应式设计 网页优化