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 端的網頁，然后允許用戶通過縮放來查看細節。顯然體驗就別的特別差了，很多本來就比較小的元素看都看不清了。第二種方式是我們設置一個適當的縮放比例。一般我們這樣設置：

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

em是什么？

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

方式一：

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

這個時候我們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);

總結

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

為了移動端更好的適配我們引入了em和rem這2個動態單位

em的大小與父元素的font-size有關，rem的大小與根元素html的font-size有關

一般在移動端我們會使用js動態計算跟節點html的font-size來達到自適應的目的。

總結

以上是生活随笔為你收集整理的css rem 大屏开发_px/em/rem的区别与应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。