前端知識點提煉：五月份

1.必須搞懂的移動端適配UI像素概念

css裏邊px究竟是什麼?

是viewport像素，不是物理像素，不是邏輯像素，不是渲染像素。

• 邏輯像素/點(像素)（device point / device pixel / point ），是爲了調和距離不同致使的差別，將全部設備根據距離，透視縮放到一個相等水平的觀看距離以後獲得的尺寸，是一個抽象的概念，這個單位就是ios開發的px，安卓開發的dp。對於pc，包括win（8+） linux，mac，由各自系統的或者對應軟件（好比webview內部）提供的圖像界面處理引擎處理進行縮放
• 物理像素（physical pixel）就是反映顯示屏的硬件條件，反映的就是顯示屏內部led燈的數量，能夠簡單理解，一組三色led表明一個物理像素，固然根據屏幕物理屬性以及處理led的方法不同。強調這是物理的，由於這是一個純硬件指標。好比我把屏幕鋸了一半，物理像素就只有一半。因此咱們通常說的分辨率/像素分辨率就是物理像素
• 渲染像素（render pixel），則是在系統內部對物理像素的分配進行再一次的調整，在pc上，渲染像素其實就是設置裏邊的分辨率。對於顯示設備，系統爲顯示設備提供渲染尺寸，由顯示設備的「縮放引擎」（帶存儲器陣列的數字視頻處理器）處理。這種「縮放引擎」通常內部有一系列的合理分辨率和一個推薦分辨率。通常推薦分辨率就是最大渲染像素，也是設備的物理分辨率（爲了最佳表現）。這是一個軟硬件（偏硬）結合的縮放方案。因爲部分設備不能設置渲染像素，因此咱們簡化描述直接跳過渲染像素，直接等同於物理像素。邏輯像素的引入，簡單來講，就是爲了消除了不一樣屏幕觀看距離和不一樣ppi（見下文）之間的差別，衍生出來的一個虛擬的尺寸。
• ppi（pixel per inch） 每英寸像素，指的是屏幕在每英寸的物理像素，更高的ppi意味着屏幕的清晰度更佳。所謂視網膜屏，其實就是指在該觀看距離內超出人類的辨認能力的屏幕。好比對於桌面設備，大於192ppi。對於移動設備大於326ppi。
  假設一個ppi160，2寸x3寸的屏幕，物理像素應該是320x480。同理ppi320，一樣尺寸的屏幕，物理像素是640x960。
• viewport像素 本質是DIP（Device Independent Pixels），中文意思設備無關像素，是與上述全部像素都無絕對邏輯關係的一個單位。實際上是瀏覽器內部對邏輯像素進行再處理的結果，簡單來理解就是調整邏輯像素的縮放來達到適應設備的一箇中間層。

面向邏輯像素開發的基本開發流程

1. 在head 設置width=device-width的viewport，其實就是讓viewport的尺寸等於邏輯像素的尺寸
2. 在css中使用px
3. 在適當的場景使用flex佈局，或者配合vw進行自適應
4. 在跨設備類型的時候（pc <-> 手機 <-> 平板）使用媒體查詢
5. 在跨設備類型若是交互差別太大的狀況，考慮分開項目開發

關於px的疑問

不一樣設備的物理像素是不同的呀，我怎麼實現不一樣物理像素的佈局，若是設計師給你一張圖，怎麼將它轉爲我想要的在css裏邊的px。

首先，你要讀懂設計師給你設計圖的意圖，通常國內的設計師，給出手機版的設計圖，通常是750px，注意這裏的px，並非咱們的px（邏輯像素），實際上是物理像素，由於設計師是根據iphone6或者同等設備來進行設計的，那麼要知道iphone6的邏輯像素實際上是 375，dpr是2，那麼拿到手的設計稿，轉換爲邏輯像素，就得除以2，咱們叫這種設計圖，叫兩倍圖。

同理，若是是375 + 375 + 375大小，那麼咱們就得除以3，叫三倍圖。

若是設計團隊有使用墨刀或者藍湖，你能夠在二者裏邊設置你的查看尺寸，獲得咱們須要的邏輯像素。

若是設計師不用藍湖等工具，給你的並非375的倍數怎麼辦，我先說辦法，緣由大家本身琢磨，我不細緻分析。

最簡單的方法，設計師給你的圖的物理寬度w，除以一個數x，若是得的出來的商在360 - 414之間，那麼你換算的公式爲【你在設計圖測量出來的物理像素數除以x】，那麼dpr就是x，也就是x倍圖。