EM單位的好處是什麼？

01-06

看到很多前端框架都用EM作為單位,比如bootstrap,foundation等.但我一直不清楚這種麻煩的計算方式相比PX有什麼優勢?難道只為了兼容IE6?

方便不方便（麻煩不麻煩）是根據設計來的。

最簡單的例子：

p { margin: 1em 0 }

表示段落上下留1em空白，則具體的p元素的字體大小如果是12px，留白也是12px，如果字體為16px，留白也是16px。想想看這裡如果只能用px，那怎麼辦？除了給每個p元素分別設置之外，根本辦不到嘛！

注意，這裡涉及一個認識問題：什麼是設計？摘錄我在另一個答案里寫的：CSS實際是一種設計DSL，所以CSS的可維護性來自於CSS代碼是否很好的映射了設計意圖。而什麼是設計意圖？不是這裡是紅的，那裡是100像素。這不是意圖，是效果。設計是定義在何種約束下，某個語義的內容和結構應該如何呈現。

以上。

沒有em比px好一說，不過在響應式設計中，em確實比px要好。利用em的特性，你可以只通過改變body的字體大小一個值就修改了整個頁面的各種寬度大小。這麼便利的東西難道還不足以說服你在響應式中使用em？因此也就不難說明以響應式為一大賣點的bootstrap和foundation為什麼會傾向於使用em。

em可以隨著設備的大小不同而發生大小上的變化，他是相對的。 px是固定的大小。

em是諸多單位里唯一一個可以實現「相對」長度的單位，這有點像在Sass里定義一個變數然後別的地方都引用它。一來換膚方便，二來在適配多種設備的時候特別有幫助。

有人說使用%寬度，但這無法解決一個寬度範圍用一套邏輯的問題，思考的時候也不自然。

舉例說我想實現一個模仿原生應用的移動站，頂部有一個導航欄。那麼這個導航欄高度如何寫才可以適配從480x800到1920x1080？最直觀的寫成3em，就可以了。（實際上css像素是「點」而非真像素，所以不至於那麼大的跨度）。

bootstrap適用所有設備，自然使用em很正常。如果你只適用pc，那這個必要性沒有那麼凸顯。

想到一個實際應用，很多瀏覽器特別是手機瀏覽器，如opera mini常常有不一致的字體大小，比如字體有大、中、小，但是大中小具體是多大往往不一定，而且對css設置字體大小是有限制的。

當你想在一個p內讓他最多能放兩行字，超出省略，瀏覽器的寬度不一致，兩行到底能放多少字是不確定的，那麼這個p的高度應該設置為多少才能保證一致呢？這時候em就很有用了熱搜詞

比如頭條，有標題的標題最多兩行，兩行標題時候下面一行簡介，一行標題時候下面兩行簡介，沒有標題時候三行簡介。用em都比較容易解決