bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

設計中的適配問題:pt、px、dp、sp的理解

2022-06-22    分類: 網站建設

到了現在,還來寫設備適配以及各單位之間的關系很不應該,因為內容太基礎了。但是經過和很多人的接觸,發現不少設計師對于這個問題的認知是錯誤的,但是卻察覺不到自己的錯誤,讓我很難過。

記得一年前,杭州的朋友要創業,公司招UI設計師,讓我幫他視頻面試,我用“請說下pt、px、dp、sp的概念以及它們之間的關系?”這個問題,難倒了50%前來面試的設計師,這個比例一點都不夸張。所以今天我決定再來說說這個問題。


1.pt和dp概念的提出

我們知道,現在市場上存在很多屏幕尺寸的手機,從3.5寸到7寸,分辨率也從低到高各不相同,可以說是百花齊放。但是這對于設計師來說可犯難了,因為不可能為每個分辨率的手機去設計一套設計稿。之前平面設計基本是用px(像素)為單位去設計的,但是px是一種絕對的單位,不能簡單的用到移動設備的設計上。為了解決一套設計稿適配不同分辨率手機的問題,iOS和Android分別提出了pt和dp的概念。

簡單的說,設計師在設計的時候,如果使用pt和dp作為單位,只需要設計一套圖,就能滿足不同的手機分辨率,真是皆大歡喜。那么pt和dp到底是什么,為什么這么神奇?

首先我們得知道,手機屏幕不同于物理世界,組成手機屏幕畫面的是一個個的像素點。如果你現在湊近家里不是高清的電視機看,是能看到屏幕里的一個個點,這就是像素點。我現在使用的iPhone6s的屏幕豎直方向是由1334個像素點組成的,橫向是由750個像素組成的,它的屏幕像素密度為326ppi。而iPhone3G的屏幕是由320*480(像素)組成的,其屏幕像素密度為91ppi。簡單的說,ppi越高,代表手機的屏幕看起來越清晰。市場上所說的視網膜屏幕,就是指用肉眼看不出屏幕中的像素點,畫面特別清晰。

網頁設計01.jpg

iPhone6s屏幕參數


所以,同樣是44個像素,在iPhone3GS和iPhone6S中所占的位置是不一樣的。如下圖:

網頁設計02.png


十個像素大小的對比

但是我們手指點擊的區域,以及我們肉眼看到的區域,要在不同的設備中保持差不多的大小才行。如果用像素作為單位,那么在iPhone3GS看到合適的圖,那放在iPhone6s就顯得特別小了。所以Apple提出了單位pt(點),Android提出了單位dp(圖形的單位)和sp(字體的單位)。


2.單位的換算

我們只需要記住,pt/dp/sp是相對單位,而px是絕對單位。在做設計稿時,用pt/dp/sp就行了。但是必須要懂得這些單位和ps之間的換算。

目前Apple的手機中,有三種不同分辨率,分別被習慣性的成為1倍圖、2倍圖、3倍圖。而Android中,不同的分辨率的被稱為ldpi、mdpi、hdpi、xhdpi、xxhdpi、xxxdpi...。關于它們之間的換算關系,我直接附上幾年前做得一張表,供大家參考。

網頁設計03.png


iPhone單位換算

網頁設計04.png

Android單位換算


今天的文章希望能幫助到哪些還不懂這些單位的設計師。

這里我想說兩點,我們認知這個世界的一步就是建立新的概念、更新大腦中舊的概念,第二步是找到每個概念之間聯系。當我們接觸一個新的概念的時候,要多去想一想,這個概念(pt/dp/sp)是什么意思?和其他概念(ppi/px)有什么聯系?

這樣我們才能成長。

文章題目:設計中的適配問題:pt、px、dp、sp的理解
文章網址:http://vcdvsql.cn/news31/170331.html

成都網站建設公司_創新互聯,為您提供云服務器、自適應網站網站改版、網站收錄、軟件開發、網站制作

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

外貿網站制作