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