之前在羅技的網站中看一下別人寫的自適應 css 的部份，在觀看中改變視窗的大小，發現到有個標題字元可以和視窗等比放大和縮小，在查看css後發現是使用vw的值，此外也覺得針對自適應的字體大小化變的部份需要記錄一下，以好分辨使用的細節與差別。

vh 和 vw

響應式的網頁設計依賴以百分比的規則應用。然而，CSS的百分比規則並不是所有問題的最佳解決方案。CSS的寬度是相對於最接近的父元素，如果你想使用窗口的寬度和高度來代替父元素的寬度和高度該怎麼辦呢？這正是提供vh和vw的作用。
例一：vh元素等於1/100窗口的高度。如果窗口的高度為900px，那麼，1vh就等於9px，同理，如果窗口的高度等於750px，那麼1vh等於7.5px。
例二：寬度為640的網頁，而基礎字體我們設置為10px。那麼我們就可以這樣計算：10/640=0.015625。因為vw是一個百分比，所以再乘以100，變成1.5625vw。

缺點：

  1. 無法精確地控制放大比率。
  2. 沒有最大或最小字體大小。
  3. 和使用font-size相比，用戶更容易使用像素來聲明大小。
  4. 相容性要到ie9後才可使用

px (pixel 像素)

  1. IE無法調整那些使用px作為單位的字體大小
  2. 國外的大部分網站能夠調整的原因在於其使用了em或rem作為字體單位
  3. Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)
  4. px像素（Pixel）相對長度單位，像素px是相對於顯示器屏幕分辨率而言的。

pt (point 磅)

  1. 為固定單位，主要針對印刷與實體尺寸，網頁開發少用到
  2. 是一個物理長度單位，指的是72分之一英吋。
  3. pt=px*72/dpi

em

em的值並不是固定繼承父級元素的字體大小，而他的特性只會跟著父層計算，參考：混用的練習demo-em外圍影響到內部的文字大小部份就會了解。

rem

CSS3的出現，他同時引進了一些新的單位，包括我們今天所說的 rem。 em相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而 rem是相對於根元素 <html>，這樣就意味著，我們只需要在根元素確定一個參考值，在根元素中設置多大的字體，這完全可以根據您自己的需。

rem的換算單位只要將 root(html) 的部份為基底就可算出轉換的單位了。
以為例： html { font-size: 14px; }為基底值，因為有不受父層的影響，所以只要在將對應的em值就可算出大小了。

換算方式，基本上都和 em一樣，只不過計算的父值是為 html，
假設今天要算的值為
html {font-size: 10px;}
body {font-size: 1.4rem;}
1.4 rem ( body) × 10px ( html) = 14px

rem換算-1rem換算-2

瀏覽器的兼容性可以使用下面的作法：

混用的練習

資料源：pxtoem em 字級對照換算、[筆記] 好用的css 3新單位vh vw ─ 讓你的圖片可以隨著螢幕大小而不同 、CSS沒有極限 – CSS的新”文字”及”尺寸”單位、font-size用VW來寫的方法、基於視口單位的網頁排版、css中單位px和em,rem的區別