em与rem的区别
em与rem的特点
em
em是一个相对单位。em的值并不是固定的。em会继承父元素的字体大小。如果当前文本的字体尺寸没有设置,则相对于浏览器的默认字体尺寸。1em=16px
rem
rem是相对于HTML根元素。1rem=100px。rem为元素设定字体大小的时候,是相对于根元素进行计算的。当我们改弯根元素下的字体大小时,下面的大小都会改变。通过rem既可以做到只修改根无素就可以成比例的调整所有字体,又可以避免字体大小逐层复合的连锁反应。
<html>
<head>
<title>em与rem的区别</title>
<stye>
{ html{font-size:100px;}
box1{font-size:16px;}
box2{font-size:3em;}
box3{font-size:0.48rem;}}
</stye>
</head>
<body>
<div id="box1">
<div id="box2">测试文字A</div>
</div>
<br />
em会继承父元素的字体大小
<div id="box1">
<div id="box3">测试文字B</div>
</div>
<br />
1rem=100px.设定字体大小的时候,是相对于根元素进行计算的
rem还支持元素宽、高等属性
</body>
</html>
用rem时,则只需要设置HTML根元素的数值,则会对全部的rem做出直接改变。层级相对比较少。