移动端布局伸缩、设置div高度等比例缩放
移动端布局伸缩、设置div高度等比例缩放
Devops海洋的渔夫
发布于 2019-05-31 16:29:51
发布于 2019-05-31 16:29:51
问题描述
首先写一个移动端布局的div出来看看，示例如下：
随着移动端的屏幕大小，div的布局宽度是设置100%，所以可以跟着变化。但是高度是固定写了10rem的高度，这样是无法随着宽度变化进行等比例变化的。
那么解决这个问题的关键就是，因为高度是使用rem单位设置的，只要随着屏幕的宽度变化，设置html的font-size大小变化，就可以控制高度的变化。
编写JavaScript脚本，控制html的font-size变化
可以看到，随着宽度变化，高度也相应有了变化了。
示例完整代码如下
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 20px;
}
.box1{
width: 100%;
height: 10rem;
background-color: gold;
font-size: 14px;
line-height: 10rem;
text-align: center;
}
</style>
<script>
(function(){
var calc = function(){
var docElement = document.documentElement;
var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
}
calc();
window.addEventListener('resize',calc);
})();
</script>
</head>
<body>
<div class="box1">移动端高度等比例问题</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.03.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录