前言：
一直以來都搞不懂移動端的適配問題，只能去使用淘寶出品的flexible移動端解決方案。但是由于沒有真正搞懂原理，因此只是淺嘗輒止。那么由一下幾個問題展開。
- 16px像素文本在pc端和移動端一樣大小嗎？
- css：width:100px;height:100px;在pc端和移動端的顯示有不同嗎？
- 100px100px位圖在移動端設(shè)置css圖片寬高為100px100px為什么模糊？
- 移動端1px問題？
分析下，前兩個問題屬于一個css像素究竟有多大？我曾以為像素大小是固定的，結(jié)論是css像素的大小是不固定的。如果轉(zhuǎn)不過彎來的小伙伴可以跟我過下幾個概念(一遍沒懂就多看幾遍，或者看看別人的介紹，或許會恍然大悟)。
像素：組成數(shù)字圖像的基本單元。
分辨率：狹義的理解為屏幕的像素。例如1200*780，可以理解為水平方向有1200的像素點(diǎn)，垂直方向有780個像素點(diǎn)。分辨率高的顯示屏可以顯示更多細(xì)節(jié)，反之則粗糙。
設(shè)備像素：又叫物理像素，不同的設(shè)備的物理像素大小也是不同的。
css像素：邏輯像素，也就是我們寫代碼時候的px。注意縮放會改變css像素大小
ppi：像素密度，即每英寸像素個數(shù)（因此物理像素大小==1/ppi），ppi的計算公式可以Google。
dpr：設(shè)備像素比。dpr=物理像素/css像素，如果dpr=2，意味著需要用2個物理像素填充一個css像素，因此css像素=dpr個物理像素大小。
由上文可以推算：1個css像素大小=dpr1個物理像素=dpr*(1/ppi)=dpr/ppi。運(yùn)用這個公式，可以知道第1個和第2個答案*
第3個問題：由于移動端的dpr>1,因此會出現(xiàn)一個css像素有多個物理像素組成。100100的位圖，只有在dpr=1的情況下，css也是100100才不會失真。在移動端，100100的位圖覆蓋的物理像素>100100的物理像素，因此電腦會采取鄰位采色，導(dǎo)致模糊。
第4個問題：1px準(zhǔn)確來說，在pc端是比移動端粗的(但是只有1點(diǎn)點(diǎn))。但是之所以會有1像素問題，主要不是和pc端比較，而是和移動端設(shè)計稿比較。移動端設(shè)計稿以iphone6距離，設(shè)計稿的寬是750px(dpr=2),設(shè)計稿上1px其實(shí)就是1個設(shè)備像素的大小，而1px在移動端是由2個設(shè)備像素填充，因此會大了2倍。至于解決方案，可Google。
推薦文章：
[為什么同樣大小的像素在移動端和pc端看起來不一樣]
(http://www.itdecent.cn/p/4583755b4f69)
前端移動端適配總結(jié)，文章有關(guān)于位圖的介紹
下一篇：移動端適配方案系列教程(2)-移動端適配基礎(chǔ)知識
