em和rem，rem适配手机屏幕

分手后的思念是犯贱 2021-11-23 01:38 426阅读 0赞

## 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号。  
![小字号显示效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4OTMzMQ_size_16_color_FFFFFF_t_70]  
我把浏览器字号（设置–字体–自定义）改大（20px）些：效果如图：明显比小字号大了，这个框的大小变成200\*200  
![大的字号显示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4OTMzMQ_size_16_color_FFFFFF_t_70 1]  
![照片大小][20190725151124934.png]  
然后我在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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4OTMzMQ_size_16_color_FFFFFF_t_70]: /images/20211122/cbb13c893a964d9a940cc9ec8d902d09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4OTMzMQ_size_16_color_FFFFFF_t_70 1]: /images/20211122/d01a0b49d0204eb6945bf8b3d77c6e5a.png
[20190725151124934.png]: /images/20211122/f4e6766b6dcf4bb6ae7d5d474c25798d.png