dp薄啥、sp、px區(qū)別[完整]

做移動(dòng)設(shè)計(jì)的同學(xué)逛尚,不管是原生app或者web app垄惧,應(yīng)該對(duì)字體字號(hào)都是很頭痛的問題。根本原因是绰寞,我們用唯一分辨率的電腦到逊,設(shè)計(jì)各個(gè)不同尺寸大小分辨率的設(shè)備,那簡直要瘋掉了滤钱。

但不要著急觉壶,我們先來理解一下一些名詞:

我們一般會(huì)碰到的度量單位主要有:dpi、ppi件缸、dp铜靶、sp、px停团、pt旷坦、in。其中佑稠,px應(yīng)該各位最熟悉的單位秒梅,也是我們主要使用的photoshop或者axure等工具用的度量單位,而它在移動(dòng)端時(shí)舌胶,的確已經(jīng)“過時(shí)”了捆蜀。但不要著急把它丟掉,因?yàn)樗墙酉聛矸浅V匾膿Q算單位(所有手機(jī)參數(shù)還是用px在表達(dá))幔嫂。

dpi和ppi這兩個(gè)是密度單位辆它,不是度量單位,而這兩個(gè)恰恰是我們換算中重要的分母履恩。簡單理解一下:

ppi (pixels per inch):圖像分辨率 (在圖像中锰茉,每英寸所包含的像素?cái)?shù)目)

dpi (dots per inch): 打印分辨率 (每英寸所能打印的點(diǎn)數(shù),即打印精度)

dpi主要應(yīng)用于輸出切心,重點(diǎn)是打印設(shè)備上飒筑。

我們?cè)谝苿?dòng)應(yīng)用中提到ppi和dpi其實(shí)都一樣(概念不同,但對(duì)設(shè)計(jì)來講沒有特別需要深入了解)绽昏,所以我們先忽略掉dpi协屡。而ppi的運(yùn)算方式是:

PPI = √(長度像素?cái)?shù)2 + 寬度像素?cái)?shù)2) / 屏幕對(duì)角線英寸數(shù)

舉個(gè)簡單的栗子,iphone5的ppi是多少全谤?ppi=√(1136px2 + 640px2)/4 in=326ppi(視網(wǎng)膜Retina屏).這樣大家就能夠明白ppi和px的關(guān)系肤晓。

這里還提到in(英寸)這個(gè)詞,這個(gè)非常重要,因?yàn)楝F(xiàn)實(shí)中我們經(jīng)常提到4英寸手機(jī)或者5.5英寸大屏手機(jī)补憾,而這個(gè)尺寸是用戶真正感受到的物理大小漫萄,所有提到不同尺寸的屏幕不僅僅是分辨率或者像素,而更多的是英寸盈匾。

好卷胯,現(xiàn)在關(guān)鍵的來了,dp威酒、sp、pt挺峡,是我們?cè)O(shè)計(jì)中的關(guān)鍵葵孤。

dp:Density-independent pixels,以160PPI屏幕為標(biāo)準(zhǔn)橱赠,則1dp=1px尤仍,dp和px的換算公式 :

dp*ppi/160 = px。比如1dp x 320ppi/160 = 2px狭姨。

sp:Scale-independent pixels宰啦,它是安卓的字體單位,以160PPI屏幕為標(biāo)準(zhǔn)饼拍,當(dāng)字體大小為 100%時(shí)赡模, 1sp=1px。

sp 與 px 的換算公式:sp*ppi/160 = px

是不是看起來dp和sp一樣师抄,在Android設(shè)計(jì)原則中漓柑,有提到這兩個(gè)單位,他建議文字的尺寸一律用sp單位叨吮,非文字的尺寸一律使用dp單位辆布。例如textSize="16sp"、layout_width="60dp"茶鉴。

為什么要把sp和dp代替px锋玲?最簡單的原因是他們不會(huì)因?yàn)閜pi的變化而變化,在相同物理尺寸和不同ppi下涵叮,他們呈現(xiàn)的高度大小是相同惭蹂。也就是說更接近物理呈現(xiàn),而px則不行围肥。

但問題來了剿干,ps或者axure里面沒有sp或者dp這個(gè)選項(xiàng)啊,怎么辦穆刻?看到網(wǎng)上有人說用pt去替換px(pt是物理高度置尔,1in=72pt)。補(bǔ)充一下自己推算的pt轉(zhuǎn)換px的公式氢伟,不一定對(duì)榜轿,可以參考:例如9pt幽歼,再96dpi下,那么就是9 * 1/72 * 96 =12px谬盐。而在72ppi下甸私,9pt=9px。

我再來做個(gè)小小的實(shí)驗(yàn):

1飞傀、先了解清楚你筆記本的ppi皇型,比如我的macbook air是11.6英寸,1366 x 768分辨率砸烦,那么它的ppi就是135ppi弃鸦。

2、然后新建一個(gè)頁面幢痘,輸入的ppi值就是你電腦的ppi值唬格。我們先來看看不同ppi值在電腦上呈現(xiàn)的字體大小是怎么樣的:

我用的都是arial 14點(diǎn)(注:專家指正這里不是px而是pt,點(diǎn))的字體颜说,但在320ppi购岗、160ppi、135ppi(我自己的)以及標(biāo)準(zhǔn)72ppi下的大小门粪,截然不同喊积。

好,我們?cè)賮砜纯葱瑁陔娔X上直接截圖web頁之后對(duì)比的效果:

你會(huì)驚訝的發(fā)現(xiàn)注服,只有72ppi是正常的,其他字體都不對(duì)了措近,因?yàn)樵镜膚eb設(shè)計(jì)是不用考慮dp溶弟、sp或者ppi的,它是直接px作為物理單位的瞭郑,而點(diǎn)在72ppi下(1pt x 1/72 x 72dpi=1px)是正常顯示的辜御。所以我們以前做web的時(shí)候根本不用擔(dān)心自己的設(shè)計(jì)在別人電腦上看起來會(huì)很大或很小。當(dāng)然其實(shí)像firefox是用96dpi屈张,也就是9pt=12px擒权。

但我再截一下用iphone訪問web之后的圖:

好吧,這時(shí)候阁谆,你就發(fā)現(xiàn)72ppi是見鬼了碳抄,因?yàn)檫@個(gè)字體在手機(jī)上看到完全地小了,所以做移動(dòng)設(shè)計(jì)不要傻乎乎地還用72ppi了场绿,不然你很難判斷效果剖效。(當(dāng)然你也可以借助我之前提到的同屏工具來映像到移動(dòng)設(shè)備上查看效果,但這個(gè)其實(shí)會(huì)很麻煩很麻煩很麻煩...)

但是到底是選160ppi還是135ppi呢?如果選了135ppi那在別人的電腦上會(huì)怎么樣呢璧尸?是不是又要重新調(diào)咒林?其實(shí)不用,我借用另外一臺(tái)Retina的macbook pro做了相同的測(cè)試爷光,你會(huì)發(fā)現(xiàn)垫竞,其實(shí)和屏幕ppi無關(guān),和你在ps里設(shè)定的分辨率有關(guān)蛀序。

[補(bǔ)充欢瞪,有位專家指出我的不對(duì),就是在點(diǎn)和px上我搞錯(cuò)了徐裸,我又嘗試了一下引有,如果是px的話,不同ppi下字體大小是不變的倦逐,而點(diǎn)(pt)的話會(huì)有變化。

并且如果是用pt來代替px的話宫补,為了整除方便檬姥,那么ppi一定要設(shè)置成72的倍數(shù),比如144ppi粉怕,上圖里面160ppi則會(huì)除不盡健民,所以上圖其實(shí)160ppi的字體還是和截圖字體有些許差異。]

然后有專家提出贫贝,iOS下是用pt作為字體單位秉犹,而Android是以sp作為字體單位,而且web app還是以px作為字體單位稚晚。怎么樣讓設(shè)計(jì)和輸出單位是一致的崇堵?我之前給出的解決方案并不十分嚴(yán)謹(jǐn)易懂,所以我重新編輯了一下客燕。

為了求證移動(dòng)字號(hào)的問題鸳劳,跑了一圈同事,最后只能暫時(shí)得出一些“不一定正確”的結(jié)論:

1也搓、字號(hào)行業(yè)標(biāo)準(zhǔn)幾乎沒有赏廓,不像web一樣,宋體12px傍妒、14px這樣很清楚幔摸。我唯一找到的只有Android的設(shè)計(jì)建議:

圖中原作者還換算了一下在240ppi下對(duì)應(yīng)的px值。

而我問了一圈同事颤练,基本上現(xiàn)在設(shè)定字號(hào)都是憑感覺做事的既忆。當(dāng)然你也可以參考Android這個(gè)標(biāo)準(zhǔn)。

2、如何在電腦上快速預(yù)覽高清內(nèi)容是否排版合理尿贫,我想到最簡單的一點(diǎn)就是縮放psd电媳,縮放的比例很關(guān)鍵,要達(dá)到物理尺寸庆亡,首先你得知道你電腦的分辨率匾乓,我的分辨率是135ppi,如果要看分辨率是326的iphone上的效果又谋,就縮小到135/326≈41.4%拼缝,你就會(huì)發(fā)現(xiàn)物理尺寸非常接近≌煤ィ可以看看一些排版上的問題咧七。當(dāng)然你也可以裝一些工具來達(dá)到更好的效果。

3任斋、怎么和開發(fā)溝通你的字體大屑套琛?我也沒有特別好的辦法废酷,就簡單分成3塊來說:

iOS瘟檩,你設(shè)計(jì)的時(shí)候字體記得用“點(diǎn)”,然后ps設(shè)定分辨率用標(biāo)準(zhǔn)的72ppi即可澈蟆,因?yàn)閾?jù)同事說墨辛,這樣下的pt值是準(zhǔn)確的,或者說iOS自動(dòng)會(huì)轉(zhuǎn)換這個(gè)值趴俘。具體也需要大家操作了才知道睹簇。而這個(gè)分辨率下1pt=1px,我簡單換算了一下sp->px->pt的尺寸:

12sp=24.45px=24.45pt寥闪;14sp=28.52px=28.52pt太惠;18sp=36.67px=36.67pt;22sp=44.88px=44.88pt疲憋;

但這個(gè)小數(shù)點(diǎn)實(shí)在難受垛叨,所以四舍五入取整數(shù),并且為了保證可以整除柜某,那么可以是24pt嗽元、28pt、36pt喂击、44pt剂癌。

Android,你就用標(biāo)準(zhǔn)sp就好了翰绊,當(dāng)然其他圖片等尺寸你可以用dp來表述佩谷。

Web app旁壮,這個(gè)我也找不到答案,因?yàn)閃eb app還會(huì)涉及到響應(yīng)式設(shè)計(jì)谐檀,而且前端會(huì)用em去表示字體比例抡谐。所以同樣,如果你用72ppi分辨率做的話桐猬,直接可以把對(duì)應(yīng)的字號(hào)告訴開發(fā)就好了麦撵,當(dāng)然最好你所用到的字號(hào)是倍數(shù)關(guān)系,最小倍數(shù)是0.25溃肪,這樣用em去做比例的時(shí)候會(huì)更容易些免胃。比如12px、16px惫撰、24px羔沙、32px這樣。

有關(guān)字體字號(hào)的研究已經(jīng)有同事在做厨钻,以后有結(jié)論了再和大家分享扼雏。


原網(wǎng)址:https://zhuanlan.zhihu.com/zhezhexiong/19565895

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市夯膀,隨后出現(xiàn)的幾起案子诗充,更是在濱河造成了極大的恐慌,老刑警劉巖棍郎,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異银室,居然都是意外死亡涂佃,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蜈敢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辜荠,“玉大人,你說我怎么就攤上這事抓狭〔。” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵否过,是天一觀的道長午笛。 經(jīng)常有香客問我,道長苗桂,這世上最難降的妖魔是什么药磺? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮煤伟,結(jié)果婚禮上癌佩,老公的妹妹穿的比我還像新娘木缝。我一直安慰自己,他們只是感情好围辙,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布我碟。 她就那樣靜靜地躺著,像睡著了一般姚建。 火紅的嫁衣襯著肌膚如雪矫俺。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天桥胞,我揣著相機(jī)與錄音恳守,去河邊找鬼。 笑死贩虾,一個(gè)胖子當(dāng)著我的面吹牛催烘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播缎罢,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼伊群,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了策精?” 一聲冷哼從身側(cè)響起舰始,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎咽袜,沒想到半個(gè)月后丸卷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡询刹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年谜嫉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凹联。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡沐兰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蔽挠,到底是詐尸還是另有隱情住闯,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布澳淑,位于F島的核電站比原,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏杠巡。R本人自食惡果不足惜春寿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望忽孽。 院中可真熱鬧绑改,春花似錦畴博、人聲如沸涉瘾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至造壮,卻和暖如春渡讼,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背耳璧。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來泰國打工成箫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人旨枯。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓蹬昌,卻偏偏與公主長得像,于是被迫代替她去往敵國和親攀隔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子皂贩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容