h5配置rem.js

最新推荐文章于 2023-05-26 10:07:18 发布

情绪乱了思绪

最新推荐文章于 2023-05-26 10:07:18 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

文章标签： html html5 css

本文链接：https://blog.youkuaiyun.com/xiaodingdang222/article/details/119932949

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

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

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>