關於移動端網頁裡的畫素

可能你也看到過px，dp，dip，sp，裝置獨立畫素、虛擬畫素……這些單位或概念吧，如果你對它們很瞭解，那本篇對你可能就沒什麼用了，當然本文並不試圖解釋這些東西的意思，而是儘可能通過解釋這些東西產生的原因，記錄一下自己對這些東西的理解。

虛擬畫素

最初的最初，一個px單位就夠了，很簡單純潔啊，一個px就代表一個螢幕上的畫素點。電腦的螢幕雖然尺寸也有差距，但是不大。一般開發網頁可以把網頁寬度設定成800，900或者1000px，然後居中，兩邊留白。大螢幕和小螢幕的網頁效果基本一樣，不同的是大螢幕網頁兩邊的留白會大一點。
後來，特別是智慧手機的普及，使用者的螢幕變得不再單一，寬度從300多px到4000多px，這個跨度就不算小了。
當然，可能面對這個300-4000，首先想到的是

    @media (min-width: 768px){ ... }

    @media (min-width: 992px){ ... }

    @media (min-width: 1200){ ... }

對這玩意不熟悉的同學可以先百度一下“@media”。

下面假定沒有dp、sp……那些單位，1px代表螢幕上的一個畫素點。

但是，有的螢幕（比如，老式的“大頭機”寬1024x高768）的寬比手機螢幕還小（比如常見的寬1080x高1920），甚至現在很多筆記本都是1366寬x768高的，比手機螢幕也大不了多少，甚至如果手機橫屏的話，比筆記本還寬且高。那麼手機上看到的網頁裡的內容會很小很小。所以，@media這種方式，，，，，，，，gg。

這時候，就有人提出了虛擬畫素的概念，就是不管真實有多少畫素點，手機螢幕的寬度，都用300-400左右的數來表示，比如1125x2436畫素的iphoneX的虛擬畫素是375x812，320x480畫素的iphone3的虛擬畫素還是320x480。
移動端網頁開發時，css裡的1px實際上就是虛擬畫素（pc端裡的1px就是真實的1px）。也就是說，手機的螢幕都在300-400px之間，不需要管真實畫素是1920x1080還是750x什麼什麼的了，對形狀要求高的設定固定寬度，其他元素撐開。那麼@media就可以正常工作了~

在瀏覽器裡按ctrl+shirft+i，然後ctrl+shirft+m，可以看到手機螢幕模擬器，可以選擇不同的型號。這些不同型號的手機的寬高，用的就是虛擬畫素這種單位。大都在300-400左右（比較寬的是平板，火狐瀏覽器裡還有筆記本的屏，不在今天的討論範圍）。

2倍屏，3倍屏

可以看到模擬器裡，iphone6和iphoneX都是寬375，但是蘋果官網上iphone6的寬是750，iphoneX的寬度是1125，這就是2倍屏，3倍屏的意思或者說原因。

虛擬畫素的別名

虛擬畫素有很多別名。比如邏輯畫素（相對於物理畫素，物理畫素就是真實畫素）；裝置無關畫素（畢竟寬1125的iphoneX和750的iphone6都是375）；裝置獨立畫素（device independent pixel，縮寫dip、dp，android裡的概念）

站在歷史的角度，用發展的眼光看問題。

其他單位

sp和pt

sp（scale independent pixel 縮放無關畫素或者縮放獨立畫素）和dp很像，也是android裡的概念，不同的是，android裝置允許使用者調整系統文字的大小，而sp的大小會隨系統文字大小的改變而改變。舉一個不恰當的例子，在2倍屏、系統文字大小為“正常”時，1sp = 2px（這裡的px是真實畫素），那麼當系統文字大小為“大”時，可能1sp = 2.5px。
pt是長度單位point的縮寫，1pt=1/72英寸。

rem和em

一直用em、rem，但是一直不知道em是什麼單詞的縮寫還是什麼，今天找了半天也還是沒找到，知道的大佬請留個言，感謝。
em和rem常用來表示字型大小，公式：1em = 父級元素的字型大小。比如瀏覽器裡的字型大小一般預設為16px，那麼如果不對font-size進行任何改變的話，那麼1em = 16px。常見的應用場景是：你不想對某個字型設定固定大小，而想根據父級元素的字型大小設定大小，那麼如果你想設定成比父級元素小一點可以設定成0.9em或者0.8em，當然這個因人而異，喜歡就用。
rem是root em（可能是吧……）是相對於根元素的字型的大小。