前言：

一直以來都搞不懂移動端的適配問題，只能去使用淘寶出品的flexible移動端解決方案。但是由於沒有真正搞懂原理，因此只是淺嘗輒止。那麼由一下幾個問題展開。

1. 16px像素文本在pc端和移動端一樣大小嗎？

2. css：width:100px;height:100px;在pc端和移動端的顯示有不同嗎？

3. 100px*100px點陣圖在移動端設置css圖片寬高為100px*100px為什麼模糊？

4. 移動端1px問題？

分析下，前兩個問題屬於一個css像素究竟有多大？我曾以為像素大小是固定的，結論是css像素的大小是不固定的。如果轉不過彎來的小夥伴可以跟我過下幾個概念(一遍沒懂就多看幾遍，或者看看別人的介紹，或許會恍然大悟)。

> 像素：組成數字圖像的基本單元。

> 解析度：狹義的理解為屏幕的像素。例如1200*780，可以理解為水平方向有1200的像素點，垂直方向有780個像素點。解析度高的顯示屏可以顯示更多細節，反之則粗糙。

> 設備像素：又叫物理像素，不同的設備的物理像素大小也是不同的。

> css像素：邏輯像素，也就是我們寫代碼時候的px。注意縮放會改變css像素大小

> ppi：像素密度，即每英寸像素個數（因此物理像素大小==1/ppi），ppi的計算公式可以Google。

> dpr：設備像素比。dpr=物理像素/css像素，如果dpr=2，意味著需要用2個物理像素填充一個css像素，因此css像素=dpr個物理像素大小。

**由上文可以推算：1個css像素大小=dpr*1個物理像素=dpr*(1/ppi)=dpr/ppi。運用這個公式，可以知道第1個和第2個答案**

第3個問題：由於移動端的dpr>1,因此會出現一個css像素有多個物理像素組成。100*100的點陣圖，只有在dpr=1的情況下，css也是100*100纔不會失真。在移動端，100*100的點陣圖覆蓋的物理像素>100*100的物理像素，因此電腦會採取鄰位采色，導致模糊。

第4個問題：1px準確來說，在pc端是比移動端粗的(但是隻有1點點)。但是之所以會有1像素問題，主要不是和pc端比較，而是和移動端設計稿比較。移動端設計稿以iphone6距離，設計稿的寬是750px(dpr=2),設計稿上1px其實就是1個設備像素的大小，而1px在移動端是由2個設備像素填充，因此會大了2倍。至於解決方案，可Google。

>推薦文章：

>[為什麼同樣大小的像素在移動端和pc端看起來不一樣]

(為什麼同樣大小的像素在移動端和pc端看起來不一樣)

>[前端移動端適配總結，文章有關於點陣圖的介紹](前端移動端適配總結 - 前端 - 掘金)

下一篇：移動端適配方案系列教程(2)-移動端適配基礎知識

推薦閱讀：

相關文章