響應式布局之 px em rem

一、寫在前面的話

作為一面前端開發者，對 px 、em 、 rem 應該是再熟悉不過了，但大多數小夥伴應該都和我一樣僅僅停留在了解的層面，並不是實質性的掌握它們。本文對三者進行了詳細的總結和詳細說明，不熟悉的各位小夥伴閱讀本文一定會有所收穫，如果你對這三者已經了解的非常透徹，那本文可能對你的幫助不大。

二、簡述

px、em、rem都是計量單位，都能表示尺寸，但是有有所不同，而且其各有各的優缺點。

三、px （pixel）

px 表示「絕對尺寸」（並非真正的絕對），實際上就是css中定義的畫素（此畫素與裝置的物理畫素有一定的區別），利用px設定字型大小及元素寬高等比較穩定和精確。px的缺點是其不能適應瀏覽器縮放時產生的變化，因此一般不用於響應式**。

注：1、畫素 1024x768 的，表示的是水平方向是 1024 個畫素點，垂直方向是 768個畫素點。　　

2、以上所述 px 為 css 中定義的畫素（以下簡稱 css 畫素），與實際的物理畫素是有區別的，早期電腦螢幕的物理畫素與 css 畫素相同，但是隨著科技的發展，高精度螢幕開始出現在人們的視野中。以 iphone 的 retina

屏為例，其物理畫素與 css 畫素關係見下圖。

四、emem是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

注意：1、em 的值並不是固定的

2、em 會繼承父級元素的字型大小。

3、任意瀏覽器的預設字型高都是 16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼 12px=0.75em,10px=0.625em。為了簡化 font-size 的換算，需要在 css 中的 body 選擇器中宣告 font-size=62.5%，這就使

em 值變為 16px*62.5%=10px, 這樣 12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以 10，然後換上 em 作為單位就行了

綜上所述，em 作為響應式布局的單位仍舊會有一些問題，當設定父元素的字型大小後，子元素的 em 就發生了變化，需要進行重新計算，為了解決這個問題便出現了 rem 。

五、rem

rem是css3新增的乙個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。下面就是乙個例子:

/*注：選擇使用什麼字型單位主要由你的專案來決定，如果你的使用者群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮相容性，那就使用px,或者兩者同時使用。

*/

瀏覽器的預設字型大小為 16px , px 與 rem 轉換如下：

rem 的適配原理

動態獲取當前視口寬度 width，除以乙個固定的數 w（通常取設計稿寬度），得到 rem 的值。表示式為 n = width / w，html，此時的 rem = n，

因為 rem 等於根標籤的字型大小。

計算：設計稿寬度為 w螢幕寬度為 cwn（px） = cw / w
html ==> n（px） = 1 rem （例：html: ==> 1rem = 16px）

假設我們需要計算乙個設計稿上測得寬度為 x(px) 的 div 的 rem 值為多少，可以有以下等式：
x(px) / w = xrem / cw
==>　xrem = (cw * x(px)) / w
==> xrem = (cw / w) * x(px)
==> xrem = 1rem * x(px)
假設 x = 20px --> xrem =20rem
注：但是注意當設計稿寬度 w = 750px 時，n = cw / w 得到的值會很小，瀏覽器會有最小字型大小為 12px 的限制，因此建議做放大 100 倍處理，即將 html 的字型大小
設定為當前計算值得 100 倍，html，此時計算 rem 只需要將設計稿尺寸除以 100 即可。

// 適配**如下

px 與 rem 的選擇？1、對於只需要適配少部分手機裝置，且解析度對頁面影響不大的，使用px即可。

2、對於需要適配各種移動裝置，使用rem，例如只需要適配iphone和ipad等解析度差別比較挺大的裝置。

六、結語

好吧，好像沒啥要總結的，能堅持別人不能的堅持得，才能擁有別人不能擁有的！致大家及自己。

響應式布局之 px em rem

響應式布局響應式布局技巧

響應式布局之 MediaQueries

前端之響應式布局

響應式布局之 px em rem

響應式布局 響應式布局技巧

響應式布局之 MediaQueries

前端之響應式布局

相關推薦

響應式布局響應式布局技巧