px、em和rem怎么應用

這篇文章主要講解了“px、em和rem怎么應用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“px、em和rem怎么應用”吧！

1px有多大？

我們先了解幾個概念：

關鍵概念

設備像素：設備屏幕實際擁有的像素點一般來說：寬度方向有1920個像素點，長度方向有1080個像素點。

邏輯像素：CSS 的像素單位(就是我們這次要討論的css的px)，其尺寸大小是相對的，也稱為獨立像素

分辨率：屏長的設備像素 × 屏寬的設備像素（1920 * 
1080）

ppi（pixels per inch）：像素密度，表示沿對角線每英寸長度的像素數目（單位是dpi）,越大顯示的越細膩

縮放因子（Scale Factor）：邏輯像素相對于設備像素的放大比例，可通過` window.devicePixelRatio `獲得，pc上可以用個個性化來設置，但二者并不完全等同

上面概念直接的關系

關系一：

　　設備尺寸 × 像素密度 = 分辨率（設備像素）

舉例：

　　iphone6s 對角線長度為5.5 inches，像素密度401 ppi，分辨率 1920 * 1080，計算可得對角線的設備像素為2205.5。

　　5.5 * 401 = 2205.5

關系二：

　　邏輯像素(css的px) = 設備像素 × 縮放因子

舉例：

　　iphone6邏輯像素為375 * 667，分辨率為750 * 1334，縮放因子為2

　　1個邏輯像素（1px） = 設備寬度的1/375

　　1個設備像素 = 設備寬度的1/750

　　1/375 = 1/750 * 2

由公式得出的結論

PC端分辨率一樣的情況下，屏幕尺寸越大，顯示的越模糊(因為dpi越小)。

舉例說明：

我們的臺式機電腦屏幕一般是32英寸，分辨率為：1920 * 1080。而一般筆記本是15.6英寸，分辨率也是：1920*1080的。由公式一：當分辨率一樣時，設備尺寸越大，像素密度越小。所以32寸的臺式電腦看上去模糊一些。

相同分辨率，相同縮放因子情況下，不同設備尺寸下，表現是一致的舉例說明：

平時我們在pc上24英寸的電腦上開發的網頁直接寫的（px），在不做任何兼容處理的情況下，在15.6英寸的筆記本上也能正常顯示。由公式二：因為一般pc端，默認情況下縮放因子為1（window.devicePixelRatio = 1），分辨率也一樣（1920 * 1080），那么得到的**邏輯像素(css的px)**也是一樣的。所以你在分辨率一樣的情況下，在大屏電腦上設置的100px，在小屏電腦上也是100px。只是他們表現出來的大小不一致，小屏上面的1px更小。

如何將pc網頁放到手機上展示？

我們可以調整網頁在移動端上的縮放比例，這個值就是viewport。默認情況下，移動端瀏覽器會將 viewport 寬度設為980px（也有可能是1024px 或其它值），也就是說1px = 設備屏幕寬度的1/980。這跟縮放因子沒有任何關系。這時的1px 非常小，所有的元素都變得非常小，移動端瀏覽器之所以這么做，是為了盡可能完整的顯示 PC 端的網頁，然后允許用戶通過縮放來查看細節。顯然體驗就別的特別差了，很多本來就比較小的元素看都看不清了。第二種方式是我們設置一個適當的縮放比例。一般我們這樣設置：

<meta name="viewport" content="width=device-width">

那么對于iphone6來說根據公式：1px = 1/750（分辨率） * 2（縮放因子） = 1/ 375。顯然比剛才的1/980大了不少，那么我們的元素如果還是按照原來的px去設置，那么屏幕肯定展示不下去了，這時候，如果我們的元素的px值能根據1px的大小是動態調整，我們的網頁就完美了，這時候em,rem就派上用場了。

em是什么？

上面提到，想讓我們的網頁在不同分辨率的設備（移動端）上正常顯示，最好我們的元素長寬，外邊距，內邊距等都是動態的

方式一：

上面說到，我們在移動端一般這樣設置：

<meta name="viewport" content="width=device-width;initial-scale=1" >

這個時候我們1px的大小就已知，iPhone6上為：1px = 1/750（分辨率） * 2（縮放因子） = 1/ 375。既然1px的大小固定了，那么我們只能動態改變一個元素設置的px了，比如說在iPhone8上是120px；而在iPhone6上需要是100px。這時候我們可以用js去動態計算，根據屏幕大小。但是顯然很麻煩，需要對每一個元素的長寬，內邊距，外邊距都需要調整，這顯然是一個巨大的工程。這時候我們就可以用到em這個單位了，em單位的名稱為相對長度單位，是根據它父元素的字體大小來計算的，一般默認情況下：16px = 1em。如果父元素font-size:16px,子元素margin:0.8em。那么得到的大小就是:0.8 * 16 =12.8。當所有單位都采用em時，我們只需要改變body的font-size，那么其他的元素寬度就能動態變化了，顯然方便很多。

rem是什么？

'rem’是’css3’新增的一個相對長度單位，它的出現是為了解決em的缺點，em可以說是相對于父級元素的字體大小，當父級元素字體大小改變時，又得重新計算。rem出現就可以解決這樣的問題，rem只相對于根目錄，即HTML元素。有了rem這個單位，我們只需要調整根元素html的font-size就能達到所有元素的動態適配了，附上一段常用適配代碼：

 /**
    * ================================================
    *   設置根元素font-size
    * 當設備寬度為375(iPhone6)時，根元素font-size=16px; 
    × ================================================
    */
(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 
'orientationchange' in window ? 
'orientationchange' : 
'resize';
  
  var refreshRem = 
function (
) {
    var clientWidth = win.innerWidth
                      || doc.documentElement.clientWidth
                      || doc.body.clientWidth;

    console.log(clientWidth)
    if (!clientWidth) 
return;
    var fz;
    var width = clientWidth;
    fz = 
16 * width / 
375;
    docEl.style.fontSize = fz + 
'px';//這樣每一份也是16px,即1rem=16px
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, refreshRem, false);
  doc.addEventListener('DOMContentLoaded', refreshRem, false);
  refreshRem();

})(document, window);

感謝各位的閱讀，以上就是“px、em和rem怎么應用”的內容了，經過本文的學習后，相信大家對px、em和rem怎么應用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！