css中的rem的使用核心

最新推荐文章于 2025-05-26 10:48:05 发布

原创最新推荐文章于 2025-05-26 10:48:05 发布 · 置顶 · 865 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css rem单位 #前端的rem单位 #web rem单位 #css3 rem单位 #rem单位

web 专栏收录该内容

75 篇文章

订阅专栏

本文详细介绍了REM单位在响应式网页设计中的应用，通过动态调整HTML根元素的字体大小实现不同屏幕尺寸下的自适应布局效果，并提供了一个具体的REM布局实例。

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

核心必读：简单介绍下rem，rem是相对单位，它和em不同，em是相对于父元素，而rem只相对于html标签，比如html标签的font-size的值是16px，那么1rem就等于16px，rem的优点就是只需要改变一个标签的font-size，就可以达到改变所有rem 的功效，从而实现自适应，（什么叫自适应？就是大的屏幕显示大的布局，比如大点的屏幕，字体就大点，按钮就大点；小的屏幕反之）这里说个例子，可能你就明白原理了，比如现在320px宽的屏幕，1rem等于16px，你要想布局一个只有屏幕一半宽的正方形，那宽高就要设置为160px除以16，也就是宽高要设置为10rem；到了640px宽的屏幕，宽度变了，翻了两倍，这时只需要把font-size的大小改为32px即可，1rem就等于32px；也是扩大了两倍，同样也达到了正方形的效果，这就是自适应开发的核心，记住这点即可，动态修改font-size的代码在下面，封装好的js代码，逻辑不用管参照你的设计稿稍微修改一下尺寸就可以了，修改哪里下面注释好了。（写的有点啰嗦，主要是考虑到刚接触的孩子）

rem.js文件

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //如果你是320的设计稿就写成320的，然后px除以20即可，如果是640的设计稿就改成640的，然后px还是除以20即可
            docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})
(document, window);

创建一个rem.js文件把这些代码放进去，再引入就可以使用了，如果使用sublime text编辑器的朋友，这里有一款px自动转换为rem的工具，我想你一定会喜欢的点击打开链接

这里给你们个小例子吧

<!DOCTYPE html>
<html id="html">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.9.0.min.js" ></script>
		<style>
			*{margin: 0px;padding: 0px;}
			/*这里的16rem就是屏幕的一半，640px宽的设计稿，要一半的话就是320除以20，很简单吧，就这样到什么宽度的屏幕都好，都是有一半的宽度*/
			.box{width: 16rem;height: 16rem; background: red;}
		</style>
	</head>
	<body>
	<div class="box"></div>
	</body>
	<script type="text/javascript" src="js/rem.js" ></script>
</html>