DIV+CSS(1.rem自适应)

最新推荐文章于 2025-10-30 19:38:44 发布

原创最新推荐文章于 2025-10-30 19:38:44 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

学习专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了使用rem单位实现响应式网页设计的方法。rem是一种相对于根元素html的font-size进行计算的单位，使得布局能够根据屏幕尺寸动态调整，提供更好的跨设备兼容性和字体缩放支持。文章提供了具体的代码示例，展示了如何通过js动态调整html的font-size，以适应不同分辨率。

rem自适应布局
使用rem布局比%更加灵活，同时可以支持浏览器字体的大小调整和缩放等正常显示。

rem是什么？
rem是一个相对单位，相对于根元素html的font-size进行计算，默认浏览器的字体大小为16px，按照转换关系1rem = 16px。

自适应处理：
使用rem布局时，为了兼容不同的分辨率，我们应该动态的修正根元素的字体大小，让所有使用rem的元素跟着一起缩放，从而达到自适应的效果。一般在项目最前面添加一段js代码来修改html的font-size，针对不同的分辨率来计算font-size，监听浏览器更改html的font-size

docElement.style.fontSize = 20 * (docElement.clientWidth / 320) + ‘px’

给html设置fontSize大小，其实就是在DOMContentLoaded或者resize之后调整fontSize大小，从而调整rem的比值关系，此处按照移动端的320宽度为标准适配。实际应用中，通过设计稿和当前可视区的大小做一个比例关系，通过比例处理缩放关系。

示例代码如下：


	<!DOCTYPE html>
	<html>
	<head>
		<meta http-equiv="COntent-type" content="text/html;charset=utf-8" />
		<title>Merry Chrismas</title>
		<style type="text/css">
			section{
				width: 100%;
				height: 100%;
				background: red;
			}
			.page{
				width: 5rem;
				height: 10rem;
				background: yellow;
				font-size: 0.3rem;
				
			}
		</style>
	</head>
	<body>
		<section class="page">
			rem会随着html的font-size变化而变化
		</section>
	</body>
	<script type="text/javascript">
		var docElement = document.documentElement,
		    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		    recalc = function () {
		    //设置字体大小
		    	docElement.style.fontSize = 20 * (docElement.clientWidth / 320);
		    }
		    window.addEventListener(resizeEvt, recalc, false);
		    document.addEventListener('DOMContentLoaded', recalc, false);
	</script>
	</html>