場景：
人物：前端實習生「阿樹」與 切圖工程師「玉鳳」
事件：設計師出設計稿，前端實現頁面
玉鳳：樹，設計稿發給你啦，差那麼點畫素，就叼死你┏( ￣へ￣)=☞
阿樹：(>_
阿樹：哇靠，為啥你給的設計稿是640px寬 ，iphone 5不是320px寬嗎？？？
玉鳳：a pixel is not a pixel is not a pixel, you know ?
阿樹：(#‵′)，i know google。。。
為什麼會出現以上的情況，難道他們當中一位出錯了，擺了這樣的烏龍？
事實上，他們都是對的，只是談的不是同乙個「畫素」。
裝置畫素(device pixel):
裝置畫素設是物理概念，指的是裝置中使用的物理畫素。
比如iphone 5的解析度640 x 1136px。
css畫素(css pixel):
css畫素是web程式設計的概念，指的是css樣式**中使用的邏輯畫素。
在css規範中，長度單位可以分為兩類，絕對(absolute)單位以及相對(relative)單位。px是乙個相對單位，相對的是裝置畫素(device pixel)。
比如iphone 5使用的是retina視網膜螢幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以裝置畫素數為640 x 1136px，而css邏輯畫素數為320 x 568px。
裝置畫素與css畫素之間的換算是如何產生的呢？
這就需要要談到每英吋畫素(pixel per inch)和裝置畫素比(device pixel ratio)。
每英吋畫素(pixel per inch)：
ppi，表示每英吋所擁有的畫素(pixel)數目，數值越高，代表顯示屏能夠以越高的密度顯示影象。ppi的計算方式可以參考維基百科每英吋畫素
裝置畫素比(device pixel ratio)：
以上計算出ppi是為了得到密度分界，獲得預設縮放比例，即裝置畫素比。
獲得裝置畫素比後，便可得知裝置畫素與css畫素之間的比例。當這個比率為1:1時，使用1個裝置畫素顯示1個css畫素。當這個比率為2:1時，使用4個裝置畫素顯示1個css畫素，當這個比率為3:1時，使用9（3*3）個裝置畫素顯示1個css畫素。
想要了解主流移動裝置的裝置畫素比(device pixel ratio)可以參考以下兩個**：
最後關於設計師和前端工程師之間如何協同：
一般由設計師按照裝置畫素(device pixel)為單位製作設計稿。
前端工程師，參照相關的裝置畫素比(device pixel ratio)，進行換算以及編碼。
H5前端基礎 布局
浮動 使用float來設定元素浮動 可選值 none 預設值，不浮動，元素在文件流中 left 元素向左浮動 right 元素向右浮動 特點 1.元素浮動以後會完全脫離文件流 2.浮動以後元素會一直向父元素的最上方移動 3.直到遇到父元素的邊框或者其他的浮動元素，會停止移動 4.如果浮動元素的上邊是...
前端H5初學筆記（四）
boder的可選值 none，預設值，無邊框 solid，實線 dotted，點狀邊框 dashed，虛線 double，雙線 margin還可以設定為auto，auto一般只設定給水平方向的margin 如果只指定，左外邊距或右外邊距的margin位auto則會將外邊距設定為最大值。垂直方向外邊距...
10大H5前端框架
bootstrap 首先說 bootstrap，估計你也猜到會先說或者一定會有這個 呵呵了 這是說明它的強大之處，擁有框架一壁江山的勢氣。自己剛入道的時候本著 任何乙個字母都得自己敲出來擋我者廢的決心，來讓自己成長。結果受到周圍各種 的引誘開始了 bootstrap 旅程。本人雖然是個設計 前端的萬...