1px有多大？

我們先了解幾個概念：

關(guān)鍵概念

設(shè)備像素：設(shè)備屏幕實際擁有的像素點一般來說：寬度方向有1920個像素點，長度方向有1080個像素點。邏輯像素：CSS 的像素單位(就是我們這次要討論的css的px)，其尺寸大小是相對的，也稱為獨立像素分辨率：屏長的設(shè)備像素 × 屏寬的設(shè)備像素(1920 * 1080)ppi(pixels per inch)：像素密度，表示沿對角線每英寸長度的像素數(shù)目(單位是dpi),越大顯示的越細(xì)膩縮放因子(Scale Factor)：邏輯像素相對于設(shè)備像素的放大比例，可通過` window.devicePixelRatio `獲得，pc上可以用個個性化來設(shè)置，但二者并不完全等同

上面概念直接的關(guān)系

關(guān)系一：　　設(shè)備尺寸 × 像素密度 = 分辨率(設(shè)備像素)舉例：　　iphone6s 對角線長度為5.5 inches，像素密度401 ppi，分辨率 1920 * 1080，計算可得對角線的設(shè)備像素為2205.5。　　5.5 * 401 = 2205.5關(guān)系二：　　邏輯像素(css的px) = 設(shè)備像素 × 縮放因子舉例：　　iphone6邏輯像素為375 * 667，分辨率為750 * 1334，縮放因子為2　　1個邏輯像素(1px) = 設(shè)備寬度的1/375　　1個設(shè)備像素 = 設(shè)備寬度的1/750　　1/375 = 1/750 * 2

由公式得出的結(jié)論

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

舉例說明：

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

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

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

如何將pc網(wǎng)頁放到手機上展示？

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

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

em是什么？

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

方式一：

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

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

rem是什么？

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

/** * ================================================ * 設(shè)置根元素font-size * 當(dāng)設(shè)備寬度為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);

總結(jié)

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

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

em的大小與父元素的font-size有關(guān)，rem的大小與根元素html的font-size有關(guān)

一般在移動端我們會使用js動態(tài)計算跟節(jié)點html的font-size來達(dá)到自適應(yīng)的目的。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。