CSS长度单位em、rem、vh

绝对长度:

in英寸
pc派卡，印刷术语1/6in
mm 1/25.4in
pt点，印刷术语 1/72英寸
px物理像素单位 1/96英寸

相对长度

注意：chrome设置的最小font-size为12px，即低于12px的字体大小会被默认为12px。PS可以通过CSS解决

响应式设计
媒体查询改变根元素字号

:root {          （以下3行）作用到所有的屏幕，但是在大屏上会被覆盖
  font-size: 0.75em;   
}                      

@media (min-width: 800px) {   （以下5行）仅作用到宽度800px及其以上的屏幕，覆盖之前的值
  :root {                     
    font-size: 0.875em;       
  }                           
}                             

@media (min-width: 1200px) {  （以下5行）仅作用到宽度1200px及其以上的屏幕，覆盖前面两个值
  :root {                      
    font-size: 1em;           
  }                            
}

em:

em有级联关系，注意只能用于 span、p、h1-h6、small、strong
具体值会根据它作用到的元素（甚至是根据属性）而变化，
在CSS中1em等于当前元素的字号

<span class="box box-small">Small</span>
<span class="box box-large">Large</span>

.box {
  padding: 1em;
  border-radius: 1em;
  background-color: lightgray;
}

.box-small {
  font-size: 12px;     （以下5行）不同的字号，可以决定元素的em值
}                           

.box-large {                
  font-size: 18px;       
}

使用em定义字体
font-size: 1.2em；//==继承的字号*1.2

body {
  font-size: 16px;
}

.slogan {                   
  font-size: 1.2em;      ←---- 计算值为19.2px       
  padding: 1.2em;        ←---- 计算值为23.04px
  background-color: #ccc;
}

rem

根节点有一个伪类选择器（:root）
rem是root em的缩写，rem是相对于根元素的单位。

em：给定字体的font-size值
ex：字体中x的高度
px是像素单位，em是相对单位，pt是绝对单位。

字体大小

pt
px
em
%

视口的相对单位

相对于浏览器视口定义长度的视口的相对单位。
vh：视口高度的1/100。
vw：视口宽度的1/100。
vmin：视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin）。
vmax：视口宽、高中较大的一方的1/100（本书写作时IE和Edge均不支持vmax）2。

相对视口单位设置字号很实用，便于缩放。

:root {
  font-size: calc(0.5em + 1vw);
}

0.5em保证了最小字号，1vw则确保了字体会随着视口缩放。这段代码保证基础字号从iPhone 6里的11.75px一直过渡到1200px的浏览器窗口里的20px。