轉 https://blog.csdn.net/u014465934/article/details/97040694
1.px像素（CSS像素）
px是相對長度。
CSS 像素（CSS Pixel）:
又稱為虛擬像素、設備獨立像素或邏輯像素，也可以理解為直覺像素。CSS 像素是 Web 編程的概念，指的是 CSS 樣式代碼中使用的邏輯像素。比如 iPhone 6 的 CSS 像素數為 375 x 667px。
虛擬像素，可以理解為“直覺”像素，CSS和JS使用的抽象單位，瀏覽器內的一切長度都是以CSS像素為單位的，CSS像素的單位是px。
在CSS規范中，長度單位可以分為兩類，絕對(absolute)單位以及相對(relative)單位。px是一個相對單位，相對的是設備像素(device pixel)。
在同樣一個設備上，每1個CSS像素所代表的物理像素是可以變化的(即CSS像素的第一方面的相對性);
在不同的設備之間，每1個CSS像素所代表的物理像素是可以變化的(即CSS像素的第二方面的相對性);
px實際是pixel（像素）的縮寫，它是圖像顯示的基本單元，既不是一個確定的物理量，也不是一個點或者小方塊，而是一個抽象概念。所以在談論像素時一定要清楚它的上下文！一定要清楚它的上下文！一定要清楚它的上下文！
舉個例子來理解css像素的相對性
假設我們用PC瀏覽器打開一個頁面，瀏覽器此時的寬度為800px，頁面上同時有一個400px寬的塊級元素容器。很明顯此時塊狀容器應該占頁面的一半。
但如果我們把頁面放大（通過“Ctrl鍵”加上“+號鍵”），放大為200%，也就是原來的兩倍。此時塊狀容器則橫向占滿了整個瀏覽器。
吊詭的是此時我們既沒有調整瀏覽器窗口大小，也沒有改變塊狀元素的css寬度，但是它看上去卻變大了一倍——這是因為我們把CSS像素放大為了原來的兩倍。
CSS像素與屏幕像素1：1同樣大小時：
CSS像素(黑色邊框)開始被拉伸，此時1個CSS像素大於1個屏幕像素
也就是說默認情況下一個CSS像素應該是等於一個物理像素的寬度的，但是瀏覽器的放大操作讓一個CSS像素等於了兩個設備像素寬度。在后面你會看到更復雜的情況，在高PPI的設備上，CSS像素甚至在默認狀態下就相當於多個物理像素的尺寸。
從上面的例子可以看出，CSS像素從來都只是一個相對值。
2. 物理像素（pt）
pt（point，磅）：是一個物理長度單位，指的是72分之一英寸。
設備像素（物理像素），顧名思義，顯示屏是由一個個物理像素點組成的，通過控制每個像素點的顏色，使屏幕顯示出不同的圖像，屏幕從工廠出來那天起，它上面的物理像素點就固定不變了，單位pt。
pt在css單位中屬於真正的絕對單位，1pt = 1/72(inch),inch及英寸，而1英寸等於2.54厘米。
不同的設備，其圖像基本單位是不同的，比如顯示器的點距，可以認為是顯示器的物理像素。現在的液晶顯示器的點距一般在0.25mm到0.29mm之間。而打印機的墨點，也可以認為是打印機的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。
==注意，我們通常所說的顯示器分辨率，其實是指桌面設定的分辨率，而不是顯示器的物理分辨率。==只不過現在液晶顯示器成為主流，由於液晶的顯示原理與CRT不同，只有在桌面分辨率與物理分辨率一致的情況下，顯示效果最佳，所以現在我們的桌面分辨率幾乎總是與顯示器的物理分辨率一致了。
3.CSS像素（px）和物理像素（pt）
CSS 像素（CSS Pixel）:
又稱為虛擬像素、設備獨立像素或邏輯像素，也可以理解為直覺像素。CSS 像素是 Web 編程的概念，指的是 CSS 樣式代碼中使用的邏輯像素。比如 iPhone 6 的 CSS 像素數為 375 x 667px。
設備像素（Device Pixels）:
又稱為物理像素。指設備能控制顯示的最小物理單位，意指顯示器上一個個的點。從屏幕在工廠生產出的那天起，它上面設備像素點就固定不變了。比如 iPhone 6 的分辨率為 750 x 1334px
設備像素比（DevicePixelRatio）:DPR = 設備像素 / CSS 像素
這里的 CSS 像素其實是理想視口
例如，iPhone 6 物理像素為 750 x 1334，理想視口 375 x 667 ，DPR = 2
現在我們對CSS像素和設備/物理像素還沒有比較清晰認識，請繼續看下面解釋：
我們寫樣式時一個像素記作1px，但是css的px和物理像素是一一對應的嗎，是同樣的概念么？在pc端是這樣的，因為屏幕足夠大，一個css像素用一個物理像素來顯示，完全可以，pc端默認情況下一個css像素就對應着一個物理像素，但是有沒有發現你把分辨率調小以后，顯示的內容變大了，但是顯示器的物理像素肯定不會變啊，這時候其實就是一個css像素對應着若干個物理像素了，這個是與用戶設置有關。
移動設備大小是有限的，而且分辨率不低，甚至比pc端更高，也就是可以顯示的物理像素更多，如果和pc端一樣，一個css的px和物理像素一一對應，可以想象，顯示的內容有多小。這樣肯定是不行的，解決這個問題，我們可以很自然的想到，那在移動設備上就別一一對應了，一個css的px對應多個物理像素吧，這樣就不至於顯示的內容過小了，實際上移動設備也是這么做的，你在開發時寫的px和最終渲染顯示的物理像素數不是一比一的，可能一個px對應2個物理像素，可能3個物理像素，設備顯示的物理像素數和你css的px數的比值就叫做設備像素比（device pixel radio），簡稱dpr。好了，這樣顯示內容過小的問題就解決了。
有了dpr之后，有一個問題就是同樣的一張圖片，我設了寬高的px數，那么在dpr為1的設備上，和dpr為2的設備上顯示的效果是一樣的，1個px在dpr為1的設備上會用1個物理像素來顯示，在dpr為2的設備上會用2*2個物理像素來顯示，這樣dpr高的優勢就體現不出來了，我設備比他的好，你給我的體驗是一樣的，可能有些用戶不爽，我們可以區分對待，對於高dpr的設備，用物理像素更多的高清圖片來替代，也就是2x圖，3x圖等等。
有了dpr之后，有一個問題就是同樣的一張圖片，我設了寬高的px數，那么在dpr為1的設備上，和dpr為2的設備上顯示的效果是一樣的，1個px在dpr為1的設備上會用1個物理像素來顯示，在dpr為2的設備上會用2*2個物理像素來顯示，這樣dpr高的優勢就體現不出來了，我設備比他的好，你給我的體驗是一樣的，可能有些用戶不爽，我們可以區分對待，對於高dpr的設備，用物理像素更多的高清圖片來替代，也就是2x圖，3x圖等等。
再談像素的物理（物理像素）和邏輯（CSS像素）之分:
設備像素比（Device Pixel Ratio，DPR）：一個設備的物理像素與邏輯像素之比。
其實在很久以前，的確是沒區別的，CSS里寫個1px，屏幕就給你渲染成1個實際的像素點，DPR=1，多么簡單自然~
后來蘋果公司為其產品mac、iPhone以及iPad的屏幕配置了Retina高清屏，也就是說這種屏幕擁有的物理像素點數比非高清屏多4倍甚至更多。如果還按照DPR=1進行展示，那么同一張圖片在高清屏上面顯示的區域面積會是非高清屏的1/4，這樣的話由於圖片在屏幕上的展示面積大大縮小，也會導致出現“看不清”的問題。
蘋果公司既然推出了Retina技術，那么這種技術帶來了高清展示福利的前提下也要解決“DPR=1”的問題。怎么解決呢？DPR!=1。蘋果公司經過一系列技術使用4個乃至更多物理像素來渲染1個邏輯像素，這樣一來，同樣的CSS代碼設置的尺寸，在Retina和非Retina屏幕上看起來大小是一樣的，但在Retina屏幕上要精細得多。
在Retian屏上，DPR不再是1，而是大於1，比如2（iPhone 5 6 7 8）或3（iPhone 6 Plus等一系列Plus）或者為非整數（一些Android機），說不定還會漲。
舉個例子，iPhone 6的物理像素上面已經說了，是750 * 1334，那它的邏輯像素呢？我們只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了，結果是 375 * 667，這就是它的邏輯像素，據此很容易計算出DRP為2。當然，我們還可以直接通過window.devicePixelRatio這個值來獲取DRP，打印結果是2，符合我們的預期。
1px邊框問題
在蘋果的帶動下，Retina技術在移動設備上已經成了標配，所以前端攻城獅必須直面如下事實
1. 你想畫個1px的下邊框，但屏幕硬是塞給你一條寬度為2—3個物理像素的線。
2. 你沒法像安卓或iOS的同事那樣直接操縱物理像素點。
1
2
這就是初級前端面試必考題之“1px邊框問題”的由來。
再通過一張圖來看CSS像素（px）和物理像素（pt）
4.em
相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。
由於瀏覽器的默認字體大小是 16px，所以未經調整默認字體大小的瀏覽器都符合: 1em = 16px。
em 會繼承父級元素的字體大小。由此，只需要改變父元素的字體大小，就可以同步放大或縮小子元素的字體。
但是也因此需要注意幾點：
1、body 選擇器中聲明 Font-size=62.5% (10 ÷ 16 × 100% = 62.5%)；
2、將你的原來的 px 數值除以 10，然后換上 em 作為單位；
3、重新計算那些被放大的字體的 em 數值。避免字體大小的重復聲明。
5. rem
由於 em 存在對父元素繼承的問題，當改變字體大小時涉及的繼承關系就變得復雜起來。
rem 是相對於根元素 字體尺寸的大小。如 文本大小設為 font-size: 10px，則 1rem = 10px。使用 rem 設置字體則簡單了很多。
移動設備的寬度是各種各樣的，每個設備的dpr也不同，換句話說就是不同設備每一行的物理像素數不同，能顯示的css的px數也不同，如果我們寫死px的話，那么后果就是同樣的px，在不同設備中顯示的行數不同，這樣整個排版就亂了，想想有啥解決的思路沒？
分析一下造成顯示效果不同的原因就是設備寬度不同，你可能會問，那dpr呢，其實與dpr一點關系都沒有，想象一下2個寬度為1000個物理像素的設備，一個dpr為1，一個dpr為2，那么在我們看來不過一個是1000px，一個是500px而已，在這里我們感知不到dpr。那么設備寬度不同怎么做適配呢，其實很容易的會想到，每個設備每行顯示的px數不同，你寫死px數的話，那肯定顯示的效果不一樣，所以，不能寫死，要動態的計算。對，實際上也是這么解決的，那怎么計算呢，很簡單，你把一個設備的樣式寫好了，其他的根據設備的寬度（px數）的比，來動態計算就行了。
rem就是解決這個問題的，rem不是具體的px，rem具體顯示多少像素，是根據根元素的font-size來計算的，比如說你設置了1.2rem，根元素的font-size是100px，那么這個元素動態算出來的px數就是120px。不同寬度，設置不同px，這樣就可以適配所有寬度的設備了。看一下實際開發中我們動態計算根元素font-size的代碼：
先來個偽代碼：
var 根元素fontsize = 實際設備寬度 / 開發時設備寬度 * 開發時根元素font-size
1
具體代碼是：（假設開發時我們適配的是iphone6，也就是375px的設備，我們開發時根元素font-size設為了100px）
document.documentElement.style.fontSize =
(document.documentElement.offsetWidth/375)*100 + 'px' ;
1
2
這樣就可以了，其實我們還可以再除以2，為什么呢，因為我們現在設計稿量出來的是物理像素，iphone6的dpr是2，我們要把量出來的數除以2，就是實際的px，然后再除以100，就是rem，既然每次都要這么做，為什么不在根元素這里把除以2給統一做了，只需要把量出的數只要除以100就是rem了。挺完美，現在基本也是用的這種方案。
其實除了根據設備寬度比例計算具體px還有一種思路，我們可以根據設備寬度不同，給不同元素設置不同的px不就行了，這也是一種思路，媒體查詢可以做到這個，也有些網站是這么做的，但是這樣不能兼顧所有的設備，因為你不可能設置很多套樣式，只會在關鍵的幾個設備寬，設置幾套，而動態計算的方式，可以適配所有的寬度。
6.rpx
微信小程序引入rpx（responsive pixel）這個新的尺寸單位
小程序編譯后，rpx會做一次px換算。換算是以375個物理像素為基准，也就是在一個寬度為375物理像素的屏幕下，1rpx = 1px。
舉個例子：iPhone6屏幕寬度為375px，共750個物理像素，那么1rpx = 375 / 750 px = 0.5px。
參考文章：
https://www.jianshu.com/p/1b69f0df78f3
https://www.cnblogs.com/zaoa/p/8630393.html
https://juejin.im/post/5cceb946e51d453afb40d820#heading-14
https://juejin.im/post/5cd0f87d6fb9a0325031c7ae#heading-6
https://www.cnblogs.com/leegent/p/9404572.html
https://www.runoob.com/w3cnote/px-pt-em-convert-table.html
https://www.cnblogs.com/libin-1/p/7148377.html
https://lzw.me/a/pt-px-em-rem.html
https://github.com/jawil/blog/issues/21
https://github.com/PolluxLee/blog/issues/86
https://github.com/wscj/blog/issues/8
https://blog.csdn.net/o_xiaopingguo/article/details/81478756
https://www.jianshu.com/p/360edb9e4ddc
https://www.jianshu.com/p/3dbf74b0db69
https://www.jianshu.com/p/e5e09f133bba
convert-pixel-point-em-rem-percent：
https://websemantics.uk/tools/convert-pixel-point-em-rem-percent/
————————————————
版權聲明：本文為CSDN博主「Cacra」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u014465934/article/details/97040694