px
像素,相对于显示器屏幕分辨率。
em
相对长度单位。参考物是父元素的font-size。
如当前父元素的字体尺寸未设置,则相对于浏览器的默认字体尺寸。
注:em的值并不是固定的;em会继承父级元素的字体大小;
eg:父元素字体大小设置了 8px,则 子元素 1em = 8px,2 em = 16px
rem
相对于HTML根元素的字体大小(font-size)来计算的长度单位。
如果没有设置html的字体大小,就会使用浏览器默认字体大小,一般是16px。
eg:<HTML>元素设置了字体尺寸为24px,则 2rem = 48 px
vh
viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。
eg:浏览器高度为 800px,那么 1vh = 800px /100 = 8px
vw
viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。
eg:浏览器宽度为 1000px,那么 1vw = 1000px /100 = 10px
vmin、vmax
vmin:vw 和 vh 中较小的值
vmax:vw 和 vh 中较大的值
如果浏览器的高为 900px,宽为 500px,则 1vmin = 5px,1vmax = 9px