rem和em的认识

最新推荐文章于 2022-09-21 19:30:16 发布

亿光年距离

最新推荐文章于 2022-09-21 19:30:16 发布

阅读量246

点赞数 1

分类专栏：日常总结文章标签： rem和em

本文链接：https://blog.csdn.net/zhujiecan/article/details/93884768

版权

日常总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

rem和em的区别

rem和em都是相对单位，根据比例来的
rem是相对于html根节点的字体大小来的，也就是说1rem等于根节点的字体大小
如：html{font-size: 14px} 那么1rem=14px
em是相对自己的字体大小来的，也就是说1em等于自身字体大小
如：p{font-size: 20px} 那么1em=20px

下面上代码

	<style>
		html{
		    font-size: 12px;
		}
		.app{
	            width: 600px;
	            height: 400px;
	        }
	        .app .rem{
	             font-size: 20px;
	         }
	         .app .rem p{
	             font-size: 30px;
	             width: 20rem;
	             background-color:rgba(0,0,0,.2);
	          }
 	          
	          .app .em{
	              font-size: 20px;           
	          }
	          .app .rem p{
	              font-size: 40px;
	              width: 20em;
	              background-color:rgba(0,0,0,.5);
	           }
        </style>
        <body>
		<div class="app">
			<div class="rem">
				<p>这是rem测试</p>
			</div>
			
		        <div class="rem">
		                <p>这是rem测试</p>
		        </div>		
	        </div>
	</body>