# 实例的 Demo:
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>download</title> | |
</head> | |
<style> | |
div { | |
font-size: 40px; | |
width: 7.5em; /* 300px */ | |
height: 7.5em; | |
border: solid 2px black; | |
} | |
p { | |
font-size: 0.5em; /* 20px */ | |
width: 7.5em; /* 150px */ | |
height: 7.5em; | |
border: solid 2px blue ; | |
color: blue; | |
}span { | |
font-size: 0.5em; | |
width: 7em; | |
height: 6em; | |
border: solid 1px red; | |
display: block; | |
color: red; | |
} | |
</style> | |
<body> | |
<div> | |
父元素div | |
<p> | |
子元素p | |
<span>孙元素span</span> | |
</p> | |
</div> | |
</body> | |
</html> |
em 相对于父元素，rem 相对于根元素。
# 1.em
（一）子元素字体大小的 em 是相对于父元素字体大小
（二）元素的 width/height/padding/margin 用 em 的话是相对于该元素的 font-size
# 2.rem
rem 是全部的长度都相对于根元素，根元素是谁？<html> 元素。通常做法是给 html 元素设置一个字体大小，然后其他元素的长度单位就为 rem。
html { | |
font-size: 10px; | |
} | |
div { | |
font-size: 4rem; /* 40px */ | |
width: 20rem; /* 200px */ | |
height: 20rem; | |
border: solid 2px black; | |
} | |
p { | |
font-size: 2rem; /* 20px */ | |
width: 10rem; | |
height: 10rem; | |
border: solid 1px blue; | |
color:blue ; | |
} | |
span { | |
font-size: 1.5rem; | |
width: 7rem; | |
height: 6rem; | |
border: solid 2px red; | |
display: block; | |
color: red; | |
} |
# 3. 总结
一、px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。
二、em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
三、em 是相对于其父元素来设置字体大小的，一般都是以 <body> 的 “font-size” 为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而 Rem 是相对于根元素 <html>，这样就意味着，我们只需要在根元素确定一个参考值。
