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