屏幕設(shè)計常用單位

pt(磅)

  • 計算公式:1 pt(磅)= 1 / 72 inch (1 inch = 2.54 cm)
  • pt(磅)的使用就是為了平面設(shè)計師方便控制輸出圖像的實際大小

dot(點)

  • dot(點)很抽象,指的是采樣或輸出的最小單位,是一個物理概念
  • 不同的設(shè)備里會和不同的具體事物關(guān)聯(lián)起來:打印機的 dot(點)指墨點,掃面儀的 dot(點)指色彩信息,屏幕設(shè)備的 dot(點)指一個物理實際像素
  • 屏幕設(shè)備里的一個燈點對應(yīng)設(shè)計師圖紙里的一個物理像素,這也是設(shè)計師使用物理像素為最小單位制圖的原因:方便控制細節(jié)(例如一個物理像素高度線條在高分屏上代碼實現(xiàn)出現(xiàn)小數(shù),用切圖控制更好),并且燈點數(shù)目是不會受各個平臺單位定義方法影響的

pt(邏輯像素)

  • 在非 Retina 設(shè)備上,一個 pt(邏輯像素)對應(yīng)屏幕上的一個燈點(物理像素,設(shè)計稿中的基本單位)
  • 在 Retina 2x 設(shè)備上,一個 pt(邏輯像素)對應(yīng)屏幕上的四個燈點
  • 在 Retina 3x 設(shè)備上,一個 pt(邏輯像素)對應(yīng)屏幕上的九個燈點
  • Retina 的本質(zhì)就是在內(nèi)容,大小完全不變的情況下加大一個邏輯像素被屏幕顯示的燈點數(shù)量,從而加強清晰度

dpi(點每英寸)

  • 顧名思義,就是每英寸有多少個采樣點的意思,所以 dpi(點每英寸)也叫物理密度
  • 關(guān)于 dpi(點每英寸)的誤解:dpi(點每英寸)超過 300 肉眼無法識別物理像素只是蘋果的營銷手段而已(100 米開外的廣場屏幕也是無法識別物理像素的)

ppi(系統(tǒng)的像素每英寸)

  • ppi(系統(tǒng)的像素每英寸)是根據(jù)最早的時候市面上常見的 dpi(點每英寸)硬性規(guī)定一個默認值( Windows 下是 96, 其他系統(tǒng)都是 72 )
  • PS 的 100% 顯示的尺寸大小其實就是在規(guī)定的 ppi(系統(tǒng)的像素每英寸)下顯示的尺寸大小,這個尺寸和真實設(shè)備的尺寸是不一致的,說白了,就是像素在 PS 里尺寸很大(以 ppi 顯示),到手機上變小了(以 dpi 顯示)
  • 目前為止,除了 Windows 系統(tǒng)軟件,其他所有涉及圖像設(shè)備的 ppi(系統(tǒng)的像素每英寸)都遵循蘋果公司 1 px = 72 inch 的標準,包括瀏覽器
  • 實際設(shè)備的 dpi 越高于 ppi, 顯示尺寸就會越小于真實尺寸
  • 蘋果規(guī)定 3GS 上 1 pt(邏輯像素)= 1 px, 然后之后的設(shè)備 dpi 成倍上升,控制屏幕,使其能較好控制真實的物理尺寸(例如觸控范圍),不受 ppi 的影響,在系統(tǒng)邏輯像素層,ppi 一直都是 72

px(渲染像素)

  • 所謂渲染像素,即系統(tǒng)處理出來的原始畫面的尺寸,即是系統(tǒng)基于 pt(邏輯像素)進行對應(yīng)倍增而得的結(jié)果,這個結(jié)果并不一定會等同于實際像素
  • iPhone 6 Plus 采用了 2208 乘以 1242 的邏輯像素,但卻因為產(chǎn)能不足把 2208 乘以 1242 的畫面塞到 1080P 的屏幕中,導(dǎo)致了 6 Plus 的渲染像素和實際像素不能一一匹配,畫面被縮小而模糊
  • iPhone 6 開啟 Display Zoom 功能時,邏輯像素與 iPhone 5 相同,即 320 pt 乘以 568 pt,渲染像素進行 @2x 處理,但 iPhone 6 的物理像素為 750 乘以 1334,比此時的渲染像素要高,所以會將畫面拉大顯示而模糊
  • iPhone 6 Plus 開啟 Display Zoom 功能時,邏輯像素與 iPhone 6 相同,即 375 pt 乘以 667 pt,渲染像素進行 @3x 處理,但 iPhone 6 Plus 的物理像素為 1080 乘以 1920,比此時的渲染像素要低,所以會將畫面縮小顯示而模糊
  • 由此可見,所謂 Display Zoom 技術(shù)就是在實際像素和渲染像素處理倍數(shù)不變的情況下,改變畫面顯示的邏輯像素(目前的規(guī)律是把邏輯像素向下一個級別),從而達到改變渲染像素的目的,渲染像素一旦被改變,畫面就會以不同的大小顯示,從而得到不同的視覺效果(目前的視覺效果即是:渲染像素變小,實際像素不變,畫面被拉大,所以能顯示更多的內(nèi)容)

dp(設(shè)備無關(guān)像素)

  • Android 把屏幕密度分為了四個廣義的大?。簂dpi 240 乘以 320 低 (120 dpi),mdpi 320 乘以 480 中 (160 dpi),hdpi 480 乘以 800 高 (240 dpi),xhdpi 720 乘以 1280 超高 ( 320dpi ),其中 google 規(guī)定 160dpi 作為屏幕適配的基準(注意,這里的分辨率為每種廣義大小的常見分辨率)
  • 在 160dpi 的機器上 1 dp = 1 px,1 sp = 1 px( Android 允許用戶自定義文字尺寸(小,正常,大,超大),當尺存為(正常)時 1 sp = 1 dp = 0.00625 inch,而當文字尺寸是(大)或(超大)時,1 sp > 1 dp = 0.00625 inch,這也是 Google 建議使用sp 作為字體尺寸定義的原因,如果用 dp 控制字體,是不會跟隨系統(tǒng)調(diào)整變化的)
  • px / dp = dpi / 160(說白了,就是當物理像素密度 160 dpi 時,1 px = 1 dp,可推算出 320 dpi 時,2 px = 1 dp,以此類推)
  • 由此可見,dp(設(shè)備無關(guān)像素)和 pt(邏輯像素)基本屬于同一個玩意兒,dp(設(shè)備無關(guān)像素)基于 160 dpi 作為基準定位,pt(邏輯像素)基于 iPhone 3G 作為基準定位,iPhone 3G 也正是 160 dpi

rem(相對于根元素的字體大?。?/h2>
  • Html 的 font-size 可以等比改變所有用了 rem 單位的元素,通過一段 js 根據(jù)瀏覽器當前的分辨率改變 font-size 的值,不管在任何分辨率下,頁面的排版都是按照等比例進行切換,并且布局沒有亂
  • 值得指出的是 em(相對于父元素的字體大?。┮呀?jīng)不太需要了,1 em 就是父元素指定的字號大小
  • PC 上默認的根元素 font-size 所有的瀏覽器都是 16 px

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容