页面根据分辨率自由压缩页面大小（大分辨率压缩成小分辨率）

yessica__

于 2023-03-31 10:39:21 发布

阅读量122

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_37641027/article/details/129874354

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文展示了一个使用JavaScript和jQuery实现的页面自适应缩放的示例，通过获取窗口宽度和页面元素尺寸，动态调整页面缩放比例和外边距，确保在不同分辨率下页面能自由压缩。代码中涉及的关键技术包括CSS3的transform属性和jQuery操作DOM。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html style="height: 100%;">
   <head>
       <meta charset="utf-8" />
       <title></title>

       <script type="text/javascript" src="js/jquery/jquery.min.js"></script>

   </head>
   <body style="height: 100%;">
       <div id="transDiv" style="height: 1584px; width: 5880px;">

           <h1>测试页面代码，页面像素大小根据分辨率自由压缩</h1>

           <div class="cicle" style="width: 550px; height: 550px;-webkit-border-radius: 275px; -moz-border-radius: 275px; border-radius: 275px; background: red;"></div>
       </div>
   </body>
</html>

let windowHeight = document.body.offsetHeight;
let pageHeight = $("#transDiv").outerHeight();
let rateY = windowHeight / pageHeight;
let marginTop = (pageHeight * (1-rateY)) / 2;
$("#transDiv").css("transform","scale(" +rateX + " , " + rateY +")");
$("#transDiv").css("margin-left",-marginLeft + "px");
$("#transDiv").css("margin-top",-marginTop + "px");
$("html").css({
"overflow-y" : "hidden", "overflow-x": "hidden"
});
}
</script>