em和rem
2020-09-30 本文已影响0人
_咻咻咻咻咻
css中单位长度用的最多的就是px，em，rem。
其中，px是固定像素。em和rem是相对长度单位，em相对于父元素，rem相对于根元素（html）。
em
- 子元素字体大小font-size的em是相对于父元素字体大小font-size
- 元素的width/height/padding/margin用em的话是相对于该元素自己的font-size
<div class="outer">
<p>outer</p>
<div class="inner">
<p>inner</p>
</div>
</div>
/* css */
.outer{
font-size: 20px;
width: 3em; /* 60px */
height: 2em; /* 40px */
}
.inner{
font-size: 0.75em; /* 15px */
width: 2em; /* 30px */
height: 1em; /* 15px */
}
rem
rem是全部的长度都相对于根元素，<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
<div class="outer">
<p>outer</p>
<div class="inner">
<p>inner</p>
</div>
</div>
/* css */
*{
box-sizing: border-box;
}
html{
font-size: 100px;
}
body{
font-size: 14px;
}
.outer{
/*font-size: .2rem; /* 20px */
width: 1rem; /* 100px */
height: 1rem; /* 100px */
}
.inner{
/* font-size: .15rem; /* 15px */
width: .8rem; /* 80px */
height: .8rem; /* 80px */
padding: .12rem; /* 12px */
}
