简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端开发20221024-1
Blogger Information
Blog 25
fans 0
comment 0
visits 9387
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端开发20221024-1
P粉114035831
Original
710 people have browsed it

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

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：代码内容可以写在代码块中，这样会有高亮显示方便阅读
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！