em和rem，rem适配手机屏幕_手机屏幕是多少em-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43389331/article/details/97262876

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>