#CSS中的一些特别的单位

常用: % 百分比 px 像素 (计算机屏幕上的一个点)

em

相对于当前对象内文本的字体尺寸。例如：
1em 等于当前的字体尺寸；
2em 等于当前字体尺寸的两倍。
如果某元素以 12pt 显示，那么 2em 是24pt。
在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。

rem

使用rem同em一样皆为相对字体大小单位，不同的是rem相对的是HTML根元素。

rem中的“r”代表“root”，这意味着设置当前元素的字体大小的基准为根元素，大多数情况下，我们会设置在html元素上。

<style>    
html {font-size: 12px;}    
div  {font-size: 1.5rem;}
</style>
<body>    
<div>Test-01 (12px * 1.5 = 18px)       
     <div>Test-02 (12px * 1.5 = 18px)           
          <div> Test-03 (12px * 1.5 = 18px)  </div>        
     </div>    
</div>
</body>

当然，rem单位不仅应用在字体上，还可以实现到CSS 网格系统中。

不常见<vh 和 vw>:

在进行响应式布局时，我们常常会使用百分比来布局，然而CSS的百分比不总是解决每个问题的最佳方案，CSS的宽度相对于离它最近的父元素的宽度。如果你想使用视口的宽度、高度而不是父元素的宽高，可以使用vh和vw单位。

1vh = viewportHeight * 1/100; 
1vw = viewportWidth * 1/100;

使用vh、vw就可以保证元素的宽高适应不同设备。

vmin 和 vmax:

vw和vh对应于viewport的width和height，而vmin和vmax分别对应于width、height中的最小值和最大值，例如如果浏览器的宽/高被设置为1000px/600px，那么

1vmin = 600 * 1/100;
1vmax = 1000 * 1/100;

ex 和 ch:

ex、ch单位与em、rem相似之处在于都依赖于font-size，但是ex、ch还依赖于font-family，基于font-specific来计算。

用一副图来解释这两种单位的含义：

这两种单位，有许多用途，大部分是用于印刷时的微调整。例如，sup、sub元素分别显示上标和下标，但是我们可以使用position和bottom模拟：

<style type="text/css">
body {    margin: 0;    padding:0;}
.sup {    position: relative;    bottom: 1ex;}
.sub {    position: relative;    bottom: -1ex;}
</style>
<div>    
     AaB<span class="sup">b</span>
     CcXxD<span class="sub">d</span>EeFf
</div>