摘要:我們用小米舉例,屏幕像素物理像素為,設(shè)備獨(dú)立像素為,也就是說(shuō),一個(gè)設(shè)備獨(dú)立像素就包含個(gè)物理像素,同時(shí)我們能得出。
本文主要闡述移動(dòng)端布局中常遇到的一些基本概念,這些概念也適用于PC端,這些概念大概有:像素(pixel),ppi,分辨率,物理像素(physical pixel), CSS像素,設(shè)備獨(dú)立像素(devicedependent pixel)
像素像素是圖像顯示的基本單位,同時(shí)像素是一個(gè)抽象概念,是一個(gè)相對(duì)單位
PPIPPI全稱:pixel per inch,也就是每英寸像素值,更確切的說(shuō)法應(yīng)該是,像素密度,也就是單位物理面積內(nèi)擁有像素值的情況
假設(shè)我們有上面這幅圖,大小都一樣,比如是1 * 1大小,但是物理面積內(nèi)的PPI分別為1,2,5,10,20,50,100。從圖中很明顯的看到,隨著PPI的增大,像素?cái)?shù)越來(lái)越多,圖像也就越來(lái)越清晰,我們的像素的長(zhǎng)度同時(shí)也變?yōu)榱耍?/1,1/2,1/5,1/10,1/20,1/50,1/100。可以得知,像素在不同的ppi下面都不同,討論像素的大小也就沒(méi)有意義了。
分辨率泛指顯示系統(tǒng)對(duì)細(xì)節(jié)的分辨能力,能顯示圖像都叫顯示系統(tǒng),比如顯示器,投影儀,照片。
分辨率常用的單位有:dpi(點(diǎn)每英寸),lpi(線每英寸),和ppi(像素每英寸)。從單位來(lái)看,分辨率是一個(gè)比值,與物理單位的比值。所以,當(dāng)有人說(shuō)這個(gè)屏幕分辨率是640*1320,你要留個(gè)心,問(wèn)問(wèn)單位是ppi?dpi?lpi?
retina顯示屏不僅僅是屏幕的革新,對(duì)于我們深刻理解各種單位其實(shí)理解有一個(gè)很大的幫助,我們先來(lái)由淺入深的分析一下什么是retina顯示屏,它提出的概念是什么?
retina采用的技術(shù)是,將更多的像素點(diǎn)壓縮在一塊屏幕里,從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度,我們來(lái)看一下未使用retina屏的iPhone3GS和率先使用的iPhone 4
iphone 3GS
iphone 4
兩代 iPhone 的物理尺寸(屏幕寬高有多少英寸)是一樣的,從上圖可以看出,iphone 4 的顯示效果要明顯好于 iphone 3GS,雖然 iPhone 4 分辨率提高了,但它不同于普通的電腦顯示器那樣為了顯示更多的內(nèi)容,而是提升顯示相同內(nèi)容時(shí)的畫(huà)面精細(xì)程度。這種提升方式是靠提升單位面積屏幕的像素?cái)?shù)量,即像素密度來(lái)提升分辨率,這樣做的主要目的是為了提高屏幕顯示畫(huà)面的精細(xì)程度。以第三代 MacBook Pro with Retina Display 為例, 工作時(shí)顯卡渲染出的 2880x1880 個(gè)像素每四個(gè)一組,輸出原來(lái)屏幕的一個(gè)像素顯示的大小區(qū)域內(nèi)的圖像。這樣一來(lái),用戶所看到的圖標(biāo)與文字的大小與原來(lái)的 1440x900 分辨率顯示屏相同,但精細(xì)度是原來(lái)的 4 倍。
注意:在桌面顯示器中,我們調(diào)整了顯示分辨率,比如從 800 * 600 調(diào)整到 1024 * 768 時(shí),屏幕的文字圖標(biāo)會(huì)變小,顯示的內(nèi)容更多了。但 Retina 顯示方式不會(huì)產(chǎn)生這樣的問(wèn)題,或者說(shuō), Retina 顯示技術(shù)解決的是顯示畫(huà)面精細(xì)程度的問(wèn)題,而不是解決顯示內(nèi)容容量的問(wèn)題。這個(gè)怎么理解呢?就是說(shuō),讓我們看下一個(gè)設(shè)備像素的概念
設(shè)備獨(dú)立像素ddp為什么是 “每四個(gè)一組”?而且要讓這四個(gè)一組來(lái)顯示 “原來(lái)屏幕的一個(gè)像素”?這大概就是 Retina 顯示技術(shù)的一種表現(xiàn)吧。而這 “每四個(gè)一組” 的 “大像素”,可以被稱作 “設(shè)備獨(dú)立像素”, device independent pixel ,或者 density-independentpixel ,它可以是系統(tǒng)中的一個(gè)點(diǎn),這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素,然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
“設(shè)備獨(dú)立像素” 也有人稱為 “CSS 像素”,一種形象的說(shuō)法,更傾向于表明與 CSS 中尺寸的對(duì)應(yīng)。
設(shè)備獨(dú)立像素與物理像素的對(duì)應(yīng)關(guān)系,可以這樣看:
我們?cè)賠etina顯示屏處挖了一個(gè)坑,現(xiàn)在我們要填一下。為什么桌面顯示器放大分辨率就顯示的內(nèi)容更多呢?而retina內(nèi)容不變,但是變?yōu)楦蛹?xì)膩?這就是設(shè)備獨(dú)立像素的影響。retina的設(shè)備獨(dú)立像素是固定的,當(dāng)我們?cè)黾酉袼攸c(diǎn)時(shí),讓更多的像素點(diǎn)渲染一個(gè)設(shè)備獨(dú)立像素所在區(qū)域,這樣必然時(shí)更細(xì)膩的,但是桌面顯示器,一個(gè)設(shè)備獨(dú)立像素占一個(gè)坑,隨著分辨率提高,像素點(diǎn)增加,并不會(huì)提升獨(dú)立像素所包含的像素點(diǎn),而是隨著像素點(diǎn)增加,獨(dú)立像素也越來(lái)越多,一個(gè)像素點(diǎn)對(duì)應(yīng)一個(gè)獨(dú)立像素,這樣就顯示的內(nèi)容就更加多了
物理像素設(shè)備能控制顯示的最小單位,我們可以把這些像素看作成顯示器上一個(gè)個(gè)的點(diǎn)。
我們?cè)谠O(shè)備獨(dú)立像素中提到的,為什么retina是“每四個(gè)一組”,這里的四個(gè)就表示物理像素,組成的這一組就叫設(shè)備獨(dú)立像素。這個(gè)設(shè)備獨(dú)立像素頗有我們前端CSS像素的味道
作為 Web 開(kāi)發(fā)者,我們接觸的更多的是用于控制元素樣式的樣式單位像素。這里的像素我們稱之為 CSS 像素。
CSS 像素有什么特別的地方?我們可以借用 quirksmode 中的這個(gè)例子:
假設(shè)我們用 PC 瀏覽器打開(kāi)一個(gè)頁(yè)面,瀏覽器此時(shí)的寬度為 800px,頁(yè)面上同時(shí)有一個(gè) 400px 寬的塊級(jí)元素容器。很明顯此時(shí)塊狀容器應(yīng)該占頁(yè)面的一半。
但如果我們把頁(yè)面放大(通過(guò) “Ctrl 鍵” 加上 “+ 號(hào)鍵”),放大為 200%,也就是原來(lái)的兩倍。此時(shí)塊狀容器則橫向占滿了整個(gè)瀏覽器。
吊詭的是此時(shí)我們既沒(méi)有調(diào)整瀏覽器窗口大小,也沒(méi)有改變塊狀元素的 css 寬度,但是它看上去卻變大了一倍——這是因?yàn)槲覀儼?CSS 像素放大為了原來(lái)的兩倍。
CSS 像素與屏幕像素 1:1 同樣大小時(shí):
CSS 像素 (黑色邊框) 開(kāi)始被拉伸,此時(shí) 1 個(gè) CSS 像素大于 1 個(gè)屏幕像素
也就是說(shuō)默認(rèn)情況下一個(gè) CSS 像素應(yīng)該是等于一個(gè)物理像素的寬度的,但是瀏覽器的放大操作讓一個(gè) CSS 像素等于了兩個(gè)物理像素寬度。在后面你會(huì)看到更復(fù)雜的情況,在高 PPI 的設(shè)備上,CSS 像素甚至在默認(rèn)狀態(tài)下就相當(dāng)于多個(gè)物理像素的尺寸,換句話說(shuō),也就是相當(dāng)于一個(gè)設(shè)備獨(dú)立像素。
從上面的例子可以看出,CSS 像素從來(lái)都只是一個(gè)相對(duì)值。
設(shè)備像素比(DevicePixelRatio)設(shè)備像素比 = 設(shè)備物理像素 / 設(shè)備獨(dú)立像素
設(shè)備像素比在 js 中可以通過(guò) devicePixelRatio 的參數(shù)取得(需要頁(yè)面的 viewport 設(shè)置為 content=”width=device-width”)
iPhone 4 的設(shè)備像素比為 2,線長(zhǎng)(橫向、縱向、對(duì)角線)上的物理像素?cái)?shù)與設(shè)備獨(dú)立像素?cái)?shù)的對(duì)應(yīng)關(guān)系即為 2。
根據(jù)這個(gè)對(duì)應(yīng)關(guān)系,一般可以通過(guò)屏幕的物理分辨率和設(shè)備像素比確定設(shè)備獨(dú)立像素?cái)?shù)。
那么在我們做移動(dòng)端網(wǎng)站時(shí),將 viewport 設(shè)置了 content=”width=device-width”,設(shè)備獨(dú)立像素也就等于 CSS 像素。
硬核總結(jié):我以一個(gè)移動(dòng)端常見(jiàn)的問(wèn)題來(lái)將上面的名詞進(jìn)行一個(gè)串聯(lián)。我們部門由于只做小米瀏覽器的開(kāi)發(fā),所以適配對(duì)于我們來(lái)講其實(shí)并不是很復(fù)雜,因?yàn)槲覀兊钠聊籨pr主要是2/2.75/3,而我們的設(shè)計(jì)師一般設(shè)計(jì)稿也是依據(jù)iPhone 6s進(jìn)行設(shè)計(jì),所以我只分析一下dpr為3這種情況。我們前端拿到設(shè)計(jì)稿的時(shí)候,切圖保存要做的第一件事,就是將切圖設(shè)置為3的倍數(shù),比如212*112,我們就手動(dòng)微調(diào)為213*114,這是為什么呢?因?yàn)槲覀円苿?dòng)端需要的圖片還得原圖除以3,也就是圖片需要是71*38。
我們上面文章有講過(guò),其實(shí)我們只需要了解物理像素,設(shè)備獨(dú)立像素,css像素就能解決這個(gè)問(wèn)題。其中物理像素和設(shè)備獨(dú)立像素我們無(wú)法控制,這是人家設(shè)備已經(jīng)設(shè)定好的。我們用小米5X舉例,屏幕像素(物理像素)為:1080*1920,設(shè)備獨(dú)立像素為:360*640,也就是說(shuō),一個(gè)設(shè)備獨(dú)立像素就包含3*3個(gè)物理像素,同時(shí)我們能得出:dpr = 1080*1920 / 360*630 = 3。我們css像素其實(shí)就等于一個(gè)設(shè)備獨(dú)立像素,但是我們?cè)O(shè)計(jì)師作圖時(shí),坐標(biāo)系時(shí)1080*1920并不是標(biāo)準(zhǔn)的360*640,這樣我們就需要將設(shè)計(jì)師的圖/3,得到的就是移動(dòng)端正確的大小。其實(shí),不管你分辨率有多高,對(duì)于普通用戶來(lái)講,分辨率,物理像素有多少是最直觀的評(píng)價(jià)標(biāo)準(zhǔn)。而我們前端工程師,關(guān)注的背后設(shè)備獨(dú)立像素是多少,因?yàn)槲覀儾季钟玫氖窃O(shè)備獨(dú)立像素而不是物理像素作為參考。所以,屏幕的分辨率是已知的,我們通過(guò)js的window.devicePixelRatio知道dpr是多少,這樣就能知道設(shè)備獨(dú)立像素的規(guī)格,從而設(shè)置我們的css像素與設(shè)備獨(dú)立像素一致,這樣我們前端就能根據(jù)進(jìn)行合適的切圖,還原設(shè)計(jì)稿!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/116947.html
摘要:但是,在移動(dòng)端,看著分辨率高達(dá)的,在控制臺(tái)中卻只有的分辨率,似乎有點(diǎn)不合邏輯。對(duì)于手機(jī),物理像素可以在手機(jī)說(shuō)明書(shū)或者官網(wǎng)的參數(shù)配置中查到,而設(shè)備獨(dú)立像素打開(kāi)控制臺(tái)選擇對(duì)應(yīng)機(jī)型后就可以看到當(dāng)然,也可以在控制臺(tái)中用上面的命令查看。 最近在做移動(dòng)端的開(kāi)發(fā),深入了解了下移動(dòng)端適配的一些問(wèn)題,加上自己的理解,記錄下來(lái),寫一個(gè)小的系列博客,與大家分享。所有的問(wèn)題,就開(kāi)始從像素說(shuō)起吧~ 像素是一個(gè)經(jīng)...
摘要:設(shè)備像素設(shè)備分辨率設(shè)備像素也叫物理像素。從圖中可以驗(yàn)證,橫縱方向的設(shè)備像素?cái)?shù)量恰好是設(shè)備獨(dú)立像素的倍。像素與設(shè)備獨(dú)立像素的關(guān)系縮放比例就是像素邊長(zhǎng)設(shè)備獨(dú)立像素邊長(zhǎng)。因?yàn)榈膶挾葲](méi)有改變,無(wú)論以什么單位衡量設(shè)備像素設(shè)備獨(dú)立像素還是像素。 這篇文章是我在我的舊博客上發(fā)過(guò)的文章,最近又碰到這個(gè)問(wèn)題,整理修改了一下發(fā)到這里。 像素單位 像素單位有設(shè)備像素、邏輯像素和CSS像素3種。 設(shè)備像素(d...
摘要:需要注意,上面的尺寸都是屏幕對(duì)角線的長(zhǎng)度英寸縮寫為在荷蘭語(yǔ)中的本意是大拇指,一英寸就是指甲底部普通人拇指的寬度。由于手機(jī)尺寸為手機(jī)對(duì)角線的長(zhǎng)度,我們通常使用如下的方法計(jì)算的為,那它每英寸約含有個(gè)物理像素點(diǎn)。導(dǎo)讀 移動(dòng)端適配,是我們?cè)陂_(kāi)發(fā)中經(jīng)常會(huì)遇到的,這里面可能會(huì)遇到非常多的問(wèn)題: 1px問(wèn)題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問(wèn)題 ... ...
摘要:在端,的一般對(duì)應(yīng)著電腦屏幕的個(gè)物理像素,但在移動(dòng)端,的等于幾個(gè)物理像素是和屏幕像素密度有關(guān)的。也被稱為視網(wǎng)膜顯示屏。設(shè)備像素比設(shè)備像素比簡(jiǎn)稱為,物理像素與設(shè)備獨(dú)立像素的比例。 在說(shuō)具體內(nèi)容之前,我們必須了解幾個(gè)概念,就是:Retina屏、物理像素、設(shè)備獨(dú)立像素、設(shè)備像素比在CSS中我們一般使用px作為單位,需要注意的是,CSS樣式里面的px和物理像素并不是相等的。CSS中的像素只是一個(gè)...
摘要:在端,的一般對(duì)應(yīng)著電腦屏幕的個(gè)物理像素,但在移動(dòng)端,的等于幾個(gè)物理像素是和屏幕像素密度有關(guān)的。也被稱為視網(wǎng)膜顯示屏。設(shè)備像素比設(shè)備像素比簡(jiǎn)稱為,物理像素與設(shè)備獨(dú)立像素的比例。 在說(shuō)具體內(nèi)容之前,我們必須了解幾個(gè)概念,就是:Retina屏、物理像素、設(shè)備獨(dú)立像素、設(shè)備像素比在CSS中我們一般使用px作為單位,需要注意的是,CSS樣式里面的px和物理像素并不是相等的。CSS中的像素只是一個(gè)...
閱讀 1856·2021-11-22 15:24
閱讀 1312·2021-11-12 10:36
閱讀 3211·2021-09-28 09:36
閱讀 1842·2021-09-02 15:15
閱讀 2755·2019-08-30 15:54
閱讀 2397·2019-08-30 11:02
閱讀 2396·2019-08-29 13:52
閱讀 3545·2019-08-26 11:53