h5配置rem.js

最新推荐文章于 2023-06-28 17:09:40 发布

原创最新推荐文章于 2023-06-28 17:09:40 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css

本文介绍如何使用rem进行页面布局，通过var设计和比例计算，确保在750px宽度下元素高度为232px时设置为2.32rem。同时，作者还分享了监测窗口大小变化重新调整字体大小的JavaScript代码。

js：

 var designW = 750;  //设计稿宽750px
 var font_rate = 100; //适配的比例，font-size为100px
 document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
 我的rem在750px下,某个高度为232px,那么rem应该设置为2.32rem
  //监测窗口大小变化
         window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
         document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
         document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
                 }, false);
             })();：

html：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		  <div class='branch'>
				<div class='header'>
					<img src="../assets/biaoti.png" >
				</div>
		    </div>
			<style type="text/css">
				*{
					margin:0px;
					padding:0px;
					list-style: none;
				}
				html,body{
					width:100%;
					height:100%;
				}
				.branch{
					width:100%;
					height:100%;
				}
					
				.header img{
					width:100%;
					height:2.32rem;
				}
			</style>
			<script src='../rem.js' type="text/javascript">
				
			</script>
	</body>
</html>