顯示的原理就是把要顯示的資料寫入視訊記憶體區域，然後顯示裝置讀取這些資料，驅動硬體就可以顯示了。顯示的資料是以畫素為單位的，乙個畫素只能顯示一種顏色，但是根據顯示顏色的總數不同，每個畫素佔的位數也不同。如果我想顯示黑白，那一位就可以儲存了，但如果我想顯示16種顏色，就得4位來儲存乙個顏色，這樣的乙個儲存單位就叫做物理畫素。
我們寫樣式時乙個畫素記作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也不同，換句話說就是不同裝置每一行的物理畫素數不同，能顯示的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-sizedocument.documentelement.style.fontsize =
(document.documentelement.offsetwidth/
375)
*100
+'px'
;
其實除了根據裝置寬度比例計算具體px還有一種思路，我們可以根據裝置寬度不同，給不同元素設定不同的px不就行了，這也是一種思路，**查詢可以做到這個，也有些**是這麼做的，但是這樣不能兼顧所有的裝置，因為你不可能設定很多套樣式，只會在關鍵的幾個裝置寬，設定幾套，而動態計算的方式，可以適配所有的寬度。
rem是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em
是指相對于父元素的字型大小的單位。它們之間其實很相似，只不過乙個計算的規則是依賴根元素乙個是依賴父元素計算。
1px畫素的問題
之前有學習過這個問題，但是一時之間沒想起來。其實就是沒有徹底弄懂，不然怎麼會想不起來呢 物理畫素 裝置螢幕實際擁有的畫素點。比如iphone 6的螢幕在寬度方向有750個畫素點，高度方向有1334個畫素點，所以iphone 6 總共有750 1334個物理畫素。邏輯畫素 邏輯畫素是乙個抽象概念，是乙...
畫素真實的物理長度
畫素真實的物理長度 畫素真實的物理長度怎麼計算呢？請拿出一把尺子，丈量你的顯示器的可見寬度 我這裡是 11.2992 英吋 除以橫向解析度 我這裡是 1024 畫素 得到的就是每個畫素的物理長度。注意 通常所說的顯示器尺寸不能直接用來作為寬度的概念 那麼通常所說的顯示器的尺寸是怎麼回事？crt顯示器...
畫素真實的物理長度
畫素真實的物理長度怎麼計算呢？請拿出一把尺子，丈量你的顯示器的可見寬度 我這裡是 11.2992 英吋 除以橫向解析度 我這裡是 1024 畫素 得到的就是每個畫素的物理長度。注意 通常所說的顯示器尺寸不能直接用來作為寬度的概念 那麼通常所說的顯示器的尺寸是怎麼回事？crt顯示器的尺寸指映象管的對角...