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 字体就会多大。
%
% 百分比,相对长度单位,相对于父元素的百分比值。