css单位——vh vw em rem等详解

最近看别人写代码，用到了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>

View Code 效果图：

先说下我的浏览器窗口大概是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>

View Code

效果图：（基于火狐浏览器）

补充：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>

View Code

测试会发现1ex不等于8px的字体，（因为这里浏览器默认字体为16px）,不完全是一半嘛