瀏覽器的標準模式與怪異模式
在W3C標準出臺以前，瀏覽器在對頁面的渲染上沒有統(tǒng)一規(guī)范，產(chǎn)生了差異；由于W3C標準的推出，瀏覽器渲染頁面有了統(tǒng)一的標準，這就是二者最簡單的區(qū)別。
為保持瀏覽器渲染的兼容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法。這樣瀏覽器渲染上就產(chǎn)生了Quircks mode和Standards mode，兩種渲染方法共存在一個瀏覽器上。
那么瀏覽器究竟該采用哪種模式渲染呢？這就引出的DTD，既是網(wǎng)頁的頭部聲明，瀏覽器會通過識別DTD而采用相對應的渲染模式.瀏覽器要使老舊的網(wǎng)頁正常工作，但這部分網(wǎng)頁是沒有doctype聲明的，所以瀏覽器對沒有doctype聲明的網(wǎng)頁采用quirks mode解析。
Em&Rem
Em和rem單位之間的區(qū)別是瀏覽器根據(jù)誰來轉化成px值, 理解這種差異是決定何時使用哪個單元的關鍵。
當使用rem單位，像素大小取決于頁根元素字體的大小，即html元素的字體大小。根元素字體大小乘以rem值。根html元素將繼承瀏覽器中設置的字體大小，除非顯式設置固定值去覆蓋。沒有設置HTML字體大小時，瀏覽器設置起作用。
當使用em單位時，像素值是將em值乘以使用em單位的元素的字體大小。當em單位設置在html元素上時，它將轉換為em值乘以瀏覽器字體大小的設置。
** 重點理解 ** :
有一個比較普遍的誤解，認為em單位是相對于父元素的字體大小。事實上，根據(jù)W3標準，它們是相對于使用em單位的元素的字體大小。
父元素的字體大小可以影響em值，但這種情況的發(fā)生，純粹是因為繼承。
如果您確實需要更改html元素的字體大小，那么就使用em，rem單位。
應用
- em
根據(jù)某個元素的字體大小做縮放而不是根元素的字體大小。一般來說，你需要使用em單位的唯一原因是縮放沒有默認字體大小的元素。 - rem
不需要em單位，并且根據(jù)瀏覽器的字體大小設置縮放的任何尺寸。簡單地說，一切可擴展都應該使用rem單位。
始終使用 rem 單位做媒體查詢
不要在多列布局中使用em或rem-改用 %。
本文整理自:
When to Use Em vs. Rem
