国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動(dòng)前端適配—邏輯像素和物理像素

mo0n1andin / 1197人閱讀

摘要：物理像素移動(dòng)設(shè)備出廠時(shí)，就具備的分辨率，小米邏輯像素當(dāng)你在設(shè)置了，那么頁(yè)面就會(huì)以移動(dòng)設(shè)備的作為邏輯像素。但是的邏輯像素只是小米的，不同手機(jī)之間存在差異性，為了讓所有手機(jī)上面的圖片較為正常的顯示，那么應(yīng)該選取一個(gè)物理像素較高的圖片。

基礎(chǔ)概念 dpi

每英寸所含有的像素點(diǎn)的個(gè)數(shù)。

物理像素

移動(dòng)設(shè)備出廠時(shí)，就具備的分辨率，小米5 1920x1080 iphone6 1334x750

邏輯像素

Give your page a , read out document.documentElement.clientWidth, and most browsers will give you the width of the layout viewport, which now equals the dips width.

當(dāng)你在html設(shè)置了，那么頁(yè)面就會(huì)以移動(dòng)設(shè)備的dpis width作為邏輯像素。

dpis width & scale

dpis width 如何得出？

你先需要計(jì)算dpi
小米5為例， sqrt(19202 x 10802) / 5.15(屏幕的物理尺寸) = 427.7

計(jì)算scale
scale = 427.7 / 160 約等于 3.(這個(gè)計(jì)算是針對(duì)于android手機(jī)，不過ios也類似，至少目前的機(jī)型都符合這個(gè)計(jì)算，有清楚的大佬可以告知)
android 以160的倍數(shù)作為分隔點(diǎn)，來劃分不同手機(jī)邏輯像素的縮放比例。
160 mdpi

320 hdpi

480 xhdpi

計(jì)算dpis width 也就是 邏輯像素
dpis width = 1080 / 3 = 360

那么結(jié)論來了

開發(fā)時(shí)其實(shí)只需要考慮邏輯像素，android 中 dp單位和移動(dòng)前端中的px是一樣的，ios中用的也是邏輯像素。

那么開發(fā)時(shí)，圖片我們改如何選擇呢？

1280 x 720 、1920 x 1080 、2560 x 1440,這物理分辨率不同的手機(jī)之間有什么區(qū)別？

還是以小米5為例，邏輯像素是360，那么其實(shí)對(duì)于小米5來說360px(物理像素)的圖片就可以正常顯示，并且不會(huì)拉伸，那么為了讓圖片的色彩更加好，可以使用720px(物理像素)的圖片或者是1080px(物理像素)的圖片。

但是360的邏輯像素只是小米5的，不同手機(jī)之間存在差異性，為了讓所有手機(jī)上面的圖片較為正常的顯示，那么應(yīng)該選取一個(gè)物理像素較高的圖片。

android端通常在本地準(zhǔn)備了多套的圖，根據(jù)不同scale來選擇不同的圖片，以便在所有手機(jī)上都能較好的顯示，同時(shí)保證了性能與展示效果，當(dāng)然你可以選擇僅僅使用一張最大的圖，但代價(jià)便是內(nèi)存占用和性能問題。

移動(dòng)web端更是如此，因?yàn)橐苿?dòng)web端的圖片通常是從服務(wù)器獲取，那么如果都統(tǒng)一使用最大的圖片，勢(shì)必會(huì)影響加載速度,所以根據(jù)實(shí)際使用情況，自己斟酌。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115516.html

相關(guān)文章

  • 移動(dòng)前端適配—邏輯像素和物理像素

    摘要：物理像素移動(dòng)設(shè)備出廠時(shí)，就具備的分辨率，小米邏輯像素當(dāng)你在設(shè)置了，那么頁(yè)面就會(huì)以移動(dòng)設(shè)備的作為邏輯像素。但是的邏輯像素只是小米的，不同手機(jī)之間存在差異性，為了讓所有手機(jī)上面的圖片較為正常的顯示，那么應(yīng)該選取一個(gè)物理像素較高的圖片。 基礎(chǔ)概念 dpi 每英寸所含有的像素點(diǎn)的個(gè)數(shù)。 物理像素 移動(dòng)設(shè)備出廠時(shí)，就具備的分辨率，小米5 1920x1080 iphone6 1334x750 邏...

    seasonley 評(píng)論0 收藏0

  • 移動(dòng)前端適配—邏輯像素和物理像素

    摘要：物理像素移動(dòng)設(shè)備出廠時(shí)，就具備的分辨率，小米邏輯像素當(dāng)你在設(shè)置了，那么頁(yè)面就會(huì)以移動(dòng)設(shè)備的作為邏輯像素。但是的邏輯像素只是小米的，不同手機(jī)之間存在差異性，為了讓所有手機(jī)上面的圖片較為正常的顯示，那么應(yīng)該選取一個(gè)物理像素較高的圖片。 基礎(chǔ)概念 dpi 每英寸所含有的像素點(diǎn)的個(gè)數(shù)。 物理像素 移動(dòng)設(shè)備出廠時(shí)，就具備的分辨率，小米5 1920x1080 iphone6 1334x750 邏...

    klivitamJ 評(píng)論0 收藏0

  • 前端移動(dòng)端適配方案之rem之小白解惑

    移動(dòng)端適配-rem: 認(rèn)識(shí)移動(dòng)端 做適配方案之前先認(rèn)識(shí)下移動(dòng)端，熟悉移動(dòng)端和pc端的區(qū)別和特點(diǎn)，才能真正理解做適配的精髓，這里就簡(jiǎn)單介紹下； 網(wǎng)上找不到主流android設(shè)備的數(shù)據(jù)表，就以iphone為例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6為例：豎屏寬為375，叫做邏輯像素（有的地方叫獨(dú)立像素）；豎屏...

    W_BinaryTree 評(píng)論0 收藏0

  • 前端移動(dòng)端適配方案之rem之小白解惑

    移動(dòng)端適配-rem: 認(rèn)識(shí)移動(dòng)端 做適配方案之前先認(rèn)識(shí)下移動(dòng)端，熟悉移動(dòng)端和pc端的區(qū)別和特點(diǎn)，才能真正理解做適配的精髓，這里就簡(jiǎn)單介紹下； 網(wǎng)上找不到主流android設(shè)備的數(shù)據(jù)表，就以iphone為例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6為例：豎屏寬為375，叫做邏輯像素（有的地方叫獨(dú)立像素）；豎屏...

    EasonTyler 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<