最近看别人写代码，用到了height:100vh;当时感觉很有意思，以前没有见过vh这个单位，于是乎就到CSS3参考手册找答案了。。。自己顺便做了下总结：
1.vh vw:相对于视口的高度，宽度。视口被均分为100单位的vh,vw，神马意思呢？看个demo
1 <!DOCTYPE html> 2 <html lang="Zh-cn"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>css_vh_vw</title> 7 </head> 8 <style type="text/css"> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .a{ 14 height:10vh; 15 width: 10vw; 16 background-color: #3a9; 17 } 18 </style> 19 20 <body> 21 <div class="a"> 22 23 </div> 24 </body> 25 </html>
先说下我的浏览器窗口大概是1366*662，而代码里宽高分别是10vh 10vw;相当于把浏览器视口分成100份，取10vh 10vw,相当于取其中的10份，1366/100*10约等于136.59
662/100*10约等于66.19。
2.rem em px:
rem：是一个相对单位，相对根元素字体大小的单位，再直白点就是相对于html元素字体大小的单位;
em:相对于父元素而言，相对于rem有点麻烦，跟px相比优点是可以自适应，em也是个相对单位；
px:设计师给出的一般都是以px为单位，所以使用px不用计算,比较简单，但是不能自适应。
重点说下rem： 首先浏览器默认字体大小16px。rem： px的换算为：1：:10；
demo:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css_vh_vw</title> 6 </head> 7 <style type="text/css"> 8 html{ 9 font-size: 62.5%; 10 } 11 .a{ 12 font-size: 10px; 13 } 14 .b{ 15 font-size: 1rem; 16 } 17 .c{ 18 font-size: 1.2rem; 19 } 20 .d{ 21 font-size: 16px; 22 } 23 *{ 24 margin: 0; 25 padding: 0; 26 } 27 28 </style> 29 <body> 30 高 31 <div class="a"> 32 高 33 </div> 34 <div class="b"> 35 高 36 </div> 37 <div class="c"> 38 高 39 </div> 40 <div class="d"> 41 高 42 </div> 43 </body> 44 </html>
效果图：（基于火狐浏览器）
补充：google的浏览器字体最小识别12px,不能再小了，再小，浏览器不能呈现你想要的效果，可以用一些技巧解决，自行百度 google。
3.ex： 相对长度单位。相对于字符“x”的高度。此高度大概为字体尺寸的一半，不完全等于一半，（用火狐浏览器测试）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css_vh_vw</title> 6 </head> 7 <style type="text/css"> 8 9 .a{ 10 font-size: 10px; 11 } 12 .b{ 13 font-size: 16px; 14 } 15 .c{ 16 font-size: 8px; 17 } 18 .d{ 19 font-size: 1ex; 20 } 21 *{ 22 margin: 0; 23 padding: 0; 24 } 25 26 </style> 27 <body> 28 X 29 <div class="a"> 30 X 31 </div> 32 <div class="b"> 33 X 34 </div> 35 <div class="c"> 36 v 37 </div> 38 <div class="d"> 39 X 40 </div> 41 </body> 42 </html>
测试会发现1ex不等于8px的字体，（因为这里浏览器默认字体为16px）,不完全是一半嘛
4.%：
% 相对长度单位。相对于浏览器窗口的大小。
5.
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px；
6.ch
数字“0”的宽度
7.vmin vmax;
h1 {font-size: 8vmin;}最后：贴张图：
参考内容：http://www.css88.com/book/css/values/length/vmax.htm