Flex-缩放自适应布局

最新推荐文章于 2025-03-25 17:35:59 发布

乔心小白菜

最新推荐文章于 2025-03-25 17:35:59 发布

阅读量9.1k

点赞数

分类专栏：自适应布局-iIE⑩以上

本文链接：https://blog.csdn.net/zc13249922659/article/details/78020083

版权

自适应布局-iIE⑩以上专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用JavaScript和Flexbox技术来实现网页在窗口缩放时自动调整布局的方法。通过获取窗口宽度与屏幕宽度的比例，计算出body的transform: scale数值，以确保内容在不同尺寸下保持合适的比例和显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flex- 自适应布局</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
background: gray;
background-size: 100% 100%;
font-size: 36px;
transform-origin: left top;
}
.wrap {
flex: 1;
display: flex;
align-items: center;
}
.wrap div {
flex: 1 1 0;
}
.foot {
background: #fff;
}
/* 内容区域充满全屏，flex布局，纵向排列*/
.content {
display: flex;
display: -webkit-flex;
position: absolute;
left: 0;
top: 0;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
min-height: 100vh;
visibility: visible;
text-align: center;
/* background-image: url(state.png);
* background-size: 100% 100%;
* background-position: left top;
*/
}
</style>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="content">
<div class="top">
this is a header
</div>
<div class="wrap">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<div class="foot">
this is a foot
</div>
</div>
<script>

window.onresize = function () {

/* 获取文档宽高与分辨率之间的比例，确定body的transform：scale的数值 */

var ratioX = $(window).width()/window.screen.width;
var ratioY = $(window).height()/window.screen.height;

window.screen.width && $('body').css('width', window.screen.width);
window.screen.height && $('body').css('height', window.screen.height);
$('head').append('<meta name="viewport" content="width='+window.screen.width+'"/>');
/* 设定body的transform:scale 属性 */
$("body").css({
transform: "scale("+ratioX+", "+ratioY+")"
})
}
onresize();
</script>
</body>
</html>