相对于视口的宽度。视口被均分为100单位的vw
屏幕宽375px,1vw=3.75px;
相对于视口的高度。视口被均分为100单位的vh
屏高1200px,1vh=12px;
相对于视口的宽度或高度中较大/小的那个。其中最大/小的那个被均分为100单位的vmax/vmin
唯一需要注意的是不支持Android 4.3（其它移动端可忽略）
最新安卓系统分布（2016.8）
VersionCodeameAPIDistribution2.2Froyo80.1%2.3.3-2.3.7Gingerbread101.7%4.0.3-4.0.4Ice Cream Sandwich151.6%4.1.xJelly Bean166.0%4.2.xJelly Bean178.3%4.3Jelly Bean182.4%4.3KitKat1929.2%5.0Lollipop2114,1%5.1Lollipop2221.4%6.0Marshmallow2315.2%考虑Android4.3,可两者混用
.test{ font-size:12px; font-size:3.2vw;//12*2/750*100vw，假设设计图为750px,设计图字体为24px }@supports
test{ font-size:12px; @supports(font-size:1vw){ font-size:3.2vw; } }sass
test{ font-size:12px; @supports(font-size:1vw){ font-size:12*2/750*100vw； } }复用
@function pxToVw($px) { @return $px / 750 * 100vw; } test{ font-size:12px; @supports(font-size:1vw){ font-size: pxToVw（24）； } }@supports：
不支持Android 4.3和ios8
ios系统分布，不包括ios10（2016.7）
IOS9IOS8Earlier86%11%3%ios8以下可以忽视
相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
默认1rem=16PX
html{ font-size:18px; } //正常为1rem=18px;如屏幕宽度不大于300px,1rem=12px; @media screen and (max-width: 300px){ html{ font-size:12px; } }或者
window.onresize = function(){ document.getElementsByTagName('html')[0].style.fontSize = document.body.scrollWidth/20+'px'; }数字“0”的宽度
兼容问题
不支持安卓4.3
一个例子就懂了
CSS3前就有，所有浏览器都支持，国外常见
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
可以指定到小数点后三位，比如“1.234em”
相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的font-size。比如说：如果在一个<div>设置字体大小为“16px”，此时这个<div>的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；如果用户通过浏览器的UI控件改变了文字的大小，那么我们整个页面也会进行放大（或缩小） <body style='font-size:14px;'> <ul style='font-size:18px;'> <li style='font-size:22px;'> <p style='font-size:1em;'>1em[22px]</p> </li> <li style='font-size:2em'> <p style='font-size:1em;'>1em[36px]</p> </li> <li> <p style='font-size:1em;'>1em[18px]</p> </li> </ul> </body>