CSS3 移动端em与rem区别

最新推荐文章于 2024-09-04 10:09:38 发布

凌冰_

最新推荐文章于 2024-09-04 10:09:38 发布

阅读量511

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/hlx20080808/article/details/88991557

版权

CSS3 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

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>

		<!--	第一个span继承了它的父元素div的大小，所以是14px-->
		<div class="use_em">EM 
			<span>使用em</span>
		</div>

        <!--第二个span是通过html来计算的，所以是40px-->
		<div class="use_rem">REM
			<span>使用rem</span>
		</div>

       
		<p>图片使用em</p>
        <!--第一个img继承的body-->
		<img src="img/image/2.png" class="img_em">
		
		<!--第二个img根据html来计算-->
		<p>图片使用rem</p>
		<img src="img/image/3.png" class="img_rem">

	</body>

效果：