css中rem、em、vw/vh、px、%各自代表的含义

rem

---

rem是全部的长度都相对于根元素

通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em

---

子元素字体大小的em是相对于父元素字体大小

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

元素的width/height/padding/margin用em的话是相对于该元素的font-size。

vw、vh 

---

vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3的一部分，基于视图窗口的单位，除了vw、vh还有vmin、vmax。

• vw:1vw 等于视口宽度的1%
• Vh:1vh 等于视口高度的1%
• vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
• vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh

px 

---

px 是绝对单位，因此只要设定多少px，就会精确的呈现，对于一些讲求精准位置的排版而言十分有用，如示例展示的，指定多大 px 字体就会多大。

% 

---

% 百分比，相对长度单位，相对于父元素的百分比值。