v系列尺寸知多少

今天來講說vh,vw,vmin,vmax，這些css3中定義的尺寸單位，能在css中解析原始包含塊的寬高信息，用途仍是有些的.
根據css3標準的定義，這些v系列的尺寸全稱爲viewport-percentage length, 顧名思義，它們定義了相對於原始包含塊的百分比尺寸。當原始包含塊的尺寸改變時，你用這些單位定義的尺寸也會相應地改變。當根元素的overflow爲auto時，則看做原始包含塊沒有滾動條。
注：原始包含塊的尺寸會受到視口滾動條的影響。（我真心不知道這個影響是什麼，若是你正好知道，還望批註給我，很是感謝）

vw

至關於原始包含塊的長度的1%，若是咱們設置一個元素的font-size:8vw，若是此時該元素包含塊的長度爲200px,那麼該值爲8*200／100=16px

vh

至關於原始包含塊高度的1%

vmin

等於vw和vh的最小值

vmax

等於vw和wh的最大值

就我而言，目前我會將這個單位用在兩個方面：
一、能夠用來作移動設備中字體的單位。
好比這樣：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
body{ font-size:5vh;}#header{ font-size:1rem;}#content{ font-size:0.8rem;}

這樣作的好處就是能夠根據設置的大小來決定字體的大小，設置在body上的緣由就是要作相對固定的字體大小設置，後續不論哪一個元素的字體大小都根據根元素來使用rem設置。
二、用於作高度100％的實現，這個不用多講了。

瀏覽器兼容性

你能夠直接查看http://caniuse.com/#search=vh

來自爲知筆記(Wiz)