CSS3 移动端em与rem区别

一时失言乱红尘 2023-10-18 16:36 26阅读 0赞

**rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。**

**rem是根据html根节点来计算的，而em是继承父元素的字体。**

<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    		<style type="text/css">
    			html {
    				font-size: 40px;
    			}
    			
    			body {
    				font-size: 20px;
    			}
    			
    			.use_em,
    			.use_rem {
    				font-size: 14px;
    			}
    			
    			/*use_em=14*2=28*/
    			.use_em span{
    				font-size:1em;
    			}
    			
    			/*html=40*1=40*/
    			.use_rem span{
    				font-size:1rem;
    			}
    			
    			
    			/*body=20*2=40*/
    			.img_em{  
    				width: 2em;
    				height: 2em;
    			}
    			/*html=40*2=80*/
    			.img_rem{
    				width: 2rem;
    				height: 2rem;
    			}
    			
    		</style>
    
    	</head>
    
    	<body>
    
    		
    		<div class="use_em">EM 
    			<span>使用em</span>
    		</div>
    
            
    		<div class="use_rem">REM
    			<span>使用rem</span>
    		</div>
    
           
    		<p>图片使用em</p>
            
    		<img src="img/image/2.png" class="img_em">
    		
    		
    		<p>图片使用rem</p>
    		<img src="img/image/3.png" class="img_rem">
    
    	</body>

**效果：**

![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]: https://img-blog.csdnimg.cn/20190403113738119.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/20190403113723281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70