資訊專欄INFORMATION COLUMN
摘要：對于開發人員來說，只要設置的兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。無論畫布設成多大，我們設計的是基準倍率的界面樣式，而且開發人員需要的單位都是邏輯像素。
我們說的分辨率，
比如
iphone4的分辨率是 960 * 640 —這個是單位是點，標識設備屏幕上有多少顯示單元，每個顯示單元，可以理解一個個物理的發光二極管
iphone4的尺寸是3.5in，說的是物理的尺寸，對角線的長度，對應我們常說的物理單位，cm，m這種。
思考一下，是不是我的分辨率越高，就顯示的越清晰？
NO， 分辨率高未必清晰，我都見過那種很大led廣告屏，分辨率高啊，幾千幾萬，但是仍然能看到明顯的顆粒度。
在仔細一想，其實清晰不清晰，主要看的是單位密度(ppi)而不是設備總像素的多少。是不是單位密度越高，顯示的細節越清晰啊。
有沒有發現，所有的這些都是和具體的設備掛鉤的。談像素談尺寸，都是離不開具體的設備。
但是有個問題，為啥又引入dp的概念，獨立設備像素呢。
物理像素對應設備像素不是挺好？
好嗎？
對于開發人員來說，設備千千萬。分辨率千差萬別。
你想一下，如果同樣3.5寸的屏幕上，我有個列表
寬度都是100%，高度我設置 20
你會發現，分辨率高的屏幕上，高度特別小，寬度特別長。反倒是
分辨率高的顯示的不清晰(跟螞蟻一樣，密度太高，物理上看起來就小的很)
這可咋整啊。
設備廠商也郁悶了，草尼瑪，老子辛辛苦苦提高分辨率，出力不討好啊。
有啥辦法，看起來物理上的高度和寬度都一致，但是更清晰的。
有沒有什么辦法解決啊！
于是大家一合計，你是ppi高嗎？那我定義一個單位，
這就引出的獨立設備像素，顧名思義，就是獨立于設備的像素。
我就定義一個邏輯單位，dp
dp有多大呢，dp就有小指頭的上方的一小塊這么大（笑笑）。
你們呢都，盡量往上靠，高的你就在設備層面轉化物理像素的時候，放大一下。
低的呢，你就縮小一點。
這樣看起來，大家是不是差不多大了。
對于開發人員來說，只要設置的兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。
是不是很爽。
大家一總結，發現把設備按照ppi分一下，大概是這么個比例：
ldpi [0.75倍]
mdpi [1倍]
hdpi [1.5倍]
xhdpi [2倍]
xxhdpi [3倍]
xxxhdpi [4倍]
不難發現，真正決定顯示效果的，是邏輯像素尺寸(獨立設備像素)。
有人問了，我一個前端懂這些有卵子用。
移動端頁面的絕對單位就是px啊，我設置dp也不支持啊(草！！!為啥不支持dp?)
px和dp有啥關系？你想啊，瀏覽器也是設備上的應用，也是按照設備的縮放比縮放的。
具體可以對照一下, 縮放比：
1dp=1px（mdpi、iPhone 3gs）
1dp=1.5px（hdpi）
1dp=2px（xhdpi、iPhone 4s/5/6）
1dp=3px（xxhdpi、iPhone 6）
1dp=4px（xxxhdpi）
你再想想，不支持dp也行啊，你不是不支持嗎？
老子自己造，自己的輪船自己造（哈哈！笑）
既然我都知道縮放比了，老子自己換算一下不就ok了。
嗯，對了，就你最聰明！！
哈哈，所以就有了rem的解決方案。
ps: 如何和設計溝通?
單位決定了我們的思考方式。
在設計和開發過程中，應該盡量使用邏輯像素尺寸來思考界面。
設計Android應用時，有的設計師喜歡把畫布設為1080×1920，有的喜歡設成720×1280。
給出的界面元素尺寸就不統一了。
Android的最小點擊區域尺寸是48x48dp，這就意味著在xhdpi的設備上，按鈕尺寸至少是96x96px。
而在xxhdpi設備上，則是144x144px。
無論畫布設成多大，我們設計的是基準倍率的界面樣式，而且開發人員需要的單位都是邏輯像素
。
所以為了保證準確高效的溝通，雙方要以邏輯像素尺寸來描述和理解界面。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100687.html
摘要：在移動端開發的過程中大家都會發現，移動端的顯示一般與桌面端的不一樣。像素講了這么多概念，仿佛還是沒有很好地解釋文章開頭的問題。上面所指出的這種抽象單位稱為設備無關像素。 在移動端開發的過程中大家都會發現，移動端的顯示一般與桌面端的不一樣。比如在iphone6上顯示一個1334x750像素大小塊狀元素，雖然在蘋果官網上iphone6標稱的屏幕像素密度是1334x750規格，但是我們卻發現...
摘要：在移動端開發的過程中大家都會發現，移動端的顯示一般與桌面端的不一樣。像素講了這么多概念，仿佛還是沒有很好地解釋文章開頭的問題。上面所指出的這種抽象單位稱為設備無關像素。 在移動端開發的過程中大家都會發現，移動端的顯示一般與桌面端的不一樣。比如在iphone6上顯示一個1334x750像素大小塊狀元素，雖然在蘋果官網上iphone6標稱的屏幕像素密度是1334x750規格，但是我們卻發現...
摘要：它能給予一個關于你使用何種設備的正式結論，并且能通過獲得。寬度兩倍，高度兩倍，總體四倍。視口的作用是限制元素，元素是所有網頁塊元素中最高一級的元素。視口并非一個結構，其不受控制。重點是上訴結論是在縮放的條件下成立的。 原文地址：http://quirksmode.org/mobile/... 這篇小短文中，我將會介紹關于viewport與諸如html元素，window 對象，scree...
摘要：真的是給我們新手學習移動端適配造成不少困惑英語真的很重要呀。細節高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準備什么樣的設計稿 三、rem方案的原理和細節 高清屏上,位圖的處理 高清屏上,關于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
摘要：真的是給我們新手學習移動端適配造成不少困惑英語真的很重要呀。細節高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準備什么樣的設計稿 三、rem方案的原理和細節 高清屏上,位圖的處理 高清屏上,關于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
閱讀 3199·2021-09-22 15:05
閱讀 2760·2019-08-30 15:56
閱讀 1068·2019-08-29 17:09
閱讀 802·2019-08-29 15:12
閱讀 2084·2019-08-26 11:55
閱讀 3061·2019-08-26 11:52
閱讀 3378·2019-08-26 10:29
閱讀 1384·2019-08-23 17:19
