什么是 rem
rem就是root em, 和em都是是前端開發中的一個動態單位rem和em的區別在於,rem是一個相對於根元素字體大小的單位- 例如: 根元素(html)
font-size: 12px;, 那么1rem就等於12px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 12px;
}
.father {
width: 100px;
height: 200px;
background: yellow;
}
.son {
width: 10rem;
height: 10rem;
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
rem 特點
- 除了根元素以外, 其它祖先元素的字體大小不會影響
rem尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 100px;
height: 200px;
font-size: 10px;
background: yellow;
}
.son {
width: 10rem;
height: 10rem;
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
- 如果根元素設置了字體大小, 那么就相對於根元素的字體大小(如上已經演示)
- 如果根元素沒有設置字體大小, 那么就相對於
瀏覽器默認的字體大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 100px;
height: 200px;
background: yellow;
}
.son {
width: 10rem;
height: 10rem;
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
結論:
rem是一個動態的單位, 會隨着根元素字體大小的變化而變化(相對單位)
