CSS3 移动端rem

╰+哭是因爲堅強的太久メ 2023-10-18 16:36 18阅读 0赞

#### [rem的值并不是固定的][rem] ####

#### [rem是相对根节点html发生变化的（和父节点无关） ][rem] ####

#### [实际开发中一般默认的把**html根节点设置为10px（62.5%）**或者是100px，方便后续计算][rem]; ####

<head>
    		<meta charset="UTF-8">
    		<title>视口标签</title>
    		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    	
    	 <style type="text/css">
    	 	 html{
    	 	 	font-size: 1rem;   /*默认字体是16px*/
    	 	 }
    	 	 
    	 	div{
    	 	 	font-size: 1.5rem;  
    	 	 }
    	 	 
    	     p{
    	 	 	font-size: 1.5rem;  
    	 	 }
    	 	 
    	 	 span{
    	 	 	font-size: 1.5rem;  
    	 	 }
    	 	
    
    	 </style>
    	</head>
    	<body>
    		<div >html根=>div 第一层  16*1.5=24px
    		    <p> div=>p 第二层 16*1.5=24px
    		     <span>div=>p=>span 第三层16*1.5=24px</span>
    		    </p>
    		</div>
    	</body>
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

**注意：必须设置在HMTL上哦！否则无效哦！**

/*如果1rem等于10px，那计算起来就方便了*/
    	 	
    	 	html{
    	 		font-size: 62.5%;     /*默认字体是16px*/
    	 	}
    	 	
    	 	div{
    	 		font-size:3rem;   
    	 	}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3][]

总结：

#### 相对单位rem是集相对大小和绝对大小的优点于一身通过它既可以做到只修改根元素字体大小就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 ####

[rem]: https://blog.csdn.net/hlx20080808/article/details/88992119
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190403154235242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019040315425119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190403154301519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190403154438305.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70