em和rem，rem适配手机屏幕

最新推荐文章于 2024-12-13 14:41:15 发布

原创最新推荐文章于 2024-12-13 14:41:15 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#em #rem #em和rem的区别 #适配手机屏幕

每天进步一点点专栏收录该内容

2 篇文章

订阅专栏

本文详细阐述了em和rem这两种长度单位在CSS中的应用原理。em单位参照当前元素或父容器的字号，而rem单位则参照根元素(html)的字号。通过具体实例展示了两种单位在不同场景下的变化特性。

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

em和rem

em:一种长度单位，参照当前元素的字号，如果没有设置，就参照父容器或者当前浏览器的默认字号。
举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 10em;//
				height: 10em;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div class="box">
			协议西之花嫁
		</div>
		
	</body>
</html>

呈现再谷歌浏览器上是这样的：如图：检查大小是160 * 160px，当前浏览器的默认字号是12号到16号。
小字号显示效果
我把浏览器字号（设置–字体–自定义）改大（20px）些：效果如图：明显比小字号大了，这个框的大小变成200*200
大的字号显示
照片大小
然后我在div里的样式设置字号也是变化。

rem是css3新增的一种长度单位，它是参照根元素(html)的字号，如果html没有设置新的字号，它参照的就是html默认字号（浏览器），当给html新设置字号，那么盒子也会变化。所以我们使用rem的时候需要设置html字号。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html{
				font-size: 30px;
			}
			.r{
				width: 10rem;
				height: 10rem;
				background-color: blue;
				font-size: 33px;
			}
			
		</style>
	</head>
	<body>
		<div class="r">
			hh哈呼不急不急
		</div>
	</body>
</html>