1. px
px像素(Pixel)。相对长度单位。像素是相对于显示器屏幕分辨率而言的。
2. em
em为相对长度单位。相对于当前对象内文本的字体尺寸。如果当前对象内定义了font-size按自定义的来计算,如果没有自定义 则按照浏览器默认的字体来计算。例如 浏览器默认字体是16px,1em 就是 16px,2em 就是 32px。
em特点:
- em的值不是固定的
- em会继承伏击元素的字体大小。
3. rem
rem是相对单位,可理解为 ”root em“。相对个呢节点HTML的字体大小来计算,使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:
p {font-size:14px; font-size:.875rem;}
4. %
一般宽泛的讲是相对于父元素,但是并不是十分准确。
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于ViewPort(可视窗口)
5. vw
vw 是 viewpoint width 的缩写,视窗宽度, 1vw 等于视窗宽度的1%。
例如 浏览器宽度为 1200px, 1 vw =1200px/100 =12px。
6.vh
vh 是 viewpoint height的缩写,视窗高度, 1vh 等于视窗高度的1%。
例如 浏览器高度 900px, 1 vh = 900px/100 = 9px。
7. vm
vm 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
例如 浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。
8. ex
取当前作用效yi果的字体的x的高度,再无法确定x高度的情况下以0.5em计算
9. ch
以节点所使用字体中的”0“ 字符为基准,找不到时为0.5em
参考:http://www.divcss5.com/css3-style/c33196.shtml
https://blog.csdn.net/xiaojinguniang/article/details/82918080