关于物理像素/逻辑像素
簡單說明一下上圖 其實沒啥關系:
描述屏幕尺寸,通常從物理和邏輯兩方面來,而DPI(dot per inch) 這個密度單位可以說是連接了物理和邏輯,表示每英寸的點數;
這個dot點,是個抽象的概念,在不同的領域具化起來有所不同,比如打印印刷領域通常是打印機輸出的最小墨點,而電腦屏幕顯示領域則是最小的像素點(就是滴一滴水在屏幕上就能看見的那種小格子);PPI(pixel per inch)每英寸的像素點數,所以在討論電腦屏幕顯示時,dpi和ppi其實是一回事
ps:上面的dot是個抽象概念,但實際生活中常提到還有個point物理單位(點),這個是物理單位,1 in = 72pt,別混了。。。
再說回ppi, pixel per inch 這里的pixel就是物理像素點,拿我的手機舉個例子,分辨率為1440 * 2560 ,這個分辨率1440 * 2560 就表示屏幕上有1440 * 2560個物理像素點;
假如隔壁老王手機分辨率是1080 * 1920,然后設計師給了一個1080 * 1920的設計稿和一堆切圖,假設這堆切圖中有個圖標大小是144px * 144px,那么怎么才能讓視覺上我和老王看到的圖標是一樣大的呢?直接寫死114px肯定不行,那樣我手機上看到的圖標肯定比老王小
這個時候就得說下,物理像素,邏輯像素和倍率了,看這里window.devicePixelRatio
我們從安卓客戶端的角度來看,我和老王的手機都是安卓,屏幕密度分別是xxxhdpi和xxhdpi的,倍率分別是4,3;邏輯像素等于物理像素除以倍率,算下,其實二者的邏輯像素是一樣的,都是360 * 640,可見這個邏輯像素比例才是決定最終顯示效果的;剛剛說的那個尺寸為144px * 144px的圖標,就是說這圖標有144 * 144個物理像素點,那么其邏輯像素就是48 * 48
對于安卓和iOS,都有自己的邏輯像素單位,分別是dp和pt(這里的pt可不是前文提到的pt),那iOS和安卓er寫個48pt/dp就差不多啦,接下來支持多種屏幕顯示就是系統的事了,據說大概有三種方案(系統根據屏幕密度擴展修改邏輯像素單位的值,或者將可繪制資源擴展到適當大小比如縮放位圖,或者針對不同屏幕密度提供不同尺寸的位圖資源)
可是對于前端er呢。。很開心沒有這個所謂的邏輯像素單位。
那我們就只能自己搞出適配的一套東西來。 比如這里只說下rem,rem單位是相對于<html>根元素的字體大小的。只要我們能根據不同屏幕大小設置不同的根元素字體大小,那么間接地就實現了不同屏幕采用不同的物理像素值,這時候這個rem就有點像別人家的dp/pt了。
轉載于:https://juejin.im/post/5a5b07496fb9a01cb912dcb4
總結
以上是生活随笔為你收集整理的关于物理像素/逻辑像素的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 索引,复合索引
- 下一篇: 项目中常见错误总结一