博客列表 >前端开发20221024-1

前端开发20221024-1

P粉114035831
P粉114035831原创
2022年10月26日 19:58:58713浏览

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做出直接改变。层级相对比较少。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议