前端开发常用单位-rem
什么是 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是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)
