一張圖解釋手機端8px原理

via: http://ued.taobao.org/blog/2013/12/%E4%B8%80%E5%BC%A0%E5%9B%BE%E8%A7%A3%E9%87%8A%E6%89%8B%E6%9C%BA%E7%AB%AF8px%E5%8E%9F%E7%90%86/

 

一張圖解釋8px原理_01

 

 

一張圖解釋8px原理_03

1. 我們先看市場上常用的屏幕精度尺寸 這時候我們統一用的是視覺常用的px爲單位。

 

 

 

一張圖解釋8px原理_05

2. 我們假定320的是1,那麼其他相對應的尺寸就應該如上所述。 爲何定320爲1呢?因爲已經約定俗成啦。

 

 

 

一張圖解釋8px原理_07

3. 我們舉個栗子,在320爲基數的時候設定爲4(px)時,所有的 屏幕換算之後都是整數,這樣我們的視覺元素就不會變形模糊。 而在設定爲2(px)的情況下,最低精度的屏幕就會出現非整數。 這就是常說的8px原理啦(640情況下)~

ps: 由於目前240的機子慢慢被淘汰,所以如果項目不需要適配該尺寸的話, 8px原理也可以變成4px原理。

 

 

 

一張圖解釋8px原理_09

4. 既然320是基數,那爲什麼我們平時新建文件的時候要選640呢? 因爲我們視覺工作時,需要設計高清的元素,方便給開發縮小, 否則一旦向量元素,放大就會模糊。當然,如果你想保證完美, 開960也是可以的。(交互的同學就不需要考慮這個問題)

 

 

 

一張圖解釋8px原理_11

5. 那爲什麼有dp呢?其實dp是個基數,就好像當初設1一樣。 這在視覺進行標註的時候,方便和開發溝通的一種方式。 這樣在開發的過程中,開發同志們能自己去換算。 假定320情況下爲1dp,那麼各屏幕尺寸的dp與px之間的換算 如上所述。

比如:當我們建立了640的文件,那麼我們在標註的時候,就 應該總起一句“假定在320的情況下1dp=1px”,這樣一來, 我們只需要以dp爲單位,標一套標註就可以了,而不用每個尺 寸標一套。

 

 

 

一張圖解釋8px原理_13

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章