響應式佈局之 px、em、 rem

 

1、寫在前面的話

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

 2、簡述

　　px、em、rem都是計量單位，都能表示尺寸，可是有有所不一樣，並且其各有各的優缺點。

3、PX （pixel）

　　Px 表示「絕對尺寸」（並不是真正的絕對），實際上就是css中定義的像素（此像素與設備的物理像素有必定的區別），利用px設置字體大小及元素寬高等比較穩定和精確。Px的缺點是其不能適應瀏覽器縮放時產生的變化，所以通常不用於響應式網站。 

注：
 一、像素 1024x768 的，表示的是水平方向是 1024 個像素點，垂直方向是 768個 像素點。　　
 二、以上所述 px 爲 css 中定義的像素（如下簡稱 css 像素），與實際的物理像素是有區別的，早期電腦屏幕的物理像素與 css 像素相同，可是隨着科技的發展，高精度屏幕開始出如今人們的視野中。以 iPhone 的 Retina
　　屏爲例，其物理像素與 css 像素關係見下圖。

 

　　爲此移動端瀏覽器以及某些桌面瀏覽器引入了 devicePixelRatio（DPR 設備像素比）屬性，其官方的定義爲：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素。而 css 像素=獨立像素，由此咱們能夠得出 devicePixelRatio = 物理像素 / css 像素，進而能夠推算出該設備上一個 css 像素表明幾個物理像素。例如 iPhone 的 retina 屏的 devicePixelRatio = 2，那麼該設備上一個 css 像素至關於 2 個物理像素。瞭解更多像素相關知識，能夠參考：https://github.com/jawil/blog/issues/21。

4、em

　　em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。

　

注意：
一、em 的值並非固定的

　二、em 會繼承父級元素的字體大小。

三、任意瀏覽器的默認字體高都是 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 。

5、rem

　　rem是CSS3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。下面就是一個例子:

p {font-size:14px; font-size:.875rem;}
/*
　　注： 選擇使用什麼字體單位主要由你的項目來決定，若是你的用戶羣都使用最新版的瀏覽器，那推薦使用rem，若是要考慮兼容性，那就使用px,或者二者同時使用。

*/

　　瀏覽器的默認字體大小爲 16px , px 與 rem 轉換以下：

 

rem 的適配原理　　

動態獲取當前視口寬度 width，除以一個固定的數 W（一般取設計稿寬度），獲得 rem 的值。表達式爲 n = width / W，html{ font-size: n（px）}，此時的 rem = n，
由於 rem 等於根標籤的字體大小。

計算：
　　設計稿寬度爲 W
　　屏幕寬度爲 CW 
　　n（px） = CW / W
　　html {font-size: n(px);} ==> n（px） = 1 rem （例：html: { font-size: 16px;} ==> 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{font-size: (CW / W) * 100;}，此時計算 rem 只須要將設計稿尺寸除以 100 便可。

// 適配代碼以下
<script type="text/javascript">
    //手機端的適配
    document.addEventListener("DOMContentLoaded",function(){
        document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
    });
     
    window.onresize = function(){
        document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
    }
</script>

 

px 與 rem 的選擇？

　　一、對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可 。

　　二、對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備。

6、結語 

　　好吧，好像沒啥要總結的，能堅持別人不能的堅持得，才能擁有別人不能擁有的！致你們及本身。