前端适配浏览器大屏,刷新切换不会变形(vue3+js)

最新推荐文章于 2025-05-25 09:45:51 发布

原创

最新推荐文章于 2025-05-25 09:45:51 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

实现逻辑

下面展示一些 内联代码片。

<script>
// 设计稿的宽度和高度，默认值为 1920x1080
let designWidthValue = 1920;
let designHeightValue = 1080;

// 获取当前窗口的宽度和高度
let innerWidth = window.innerWidth;
let innerHeight = window.innerHeight;

// 容器高度，初始值为设计稿的高度
let containerHeight = ref(`${
     
     designHeightValue}px`);

// 计算缩放比例，基于窗口高度与设计稿高度的比值，保留 3 位小数
let zoom = (innerHeight / designHeightValue