移動設備分辨率與rpx

小程序推薦使用的長度單位是rpx,看看官方說明:
rpx(responsive pixel): 可以根據(jù)屏幕寬度進行自適應拇泣。

首先提出幾個疑問:

1.為什么模擬器下ip6的分辨率是375,而設計圖一般會給750狡蝶,所以設計圖上“100px”的長度開發(fā)者要寫成“50px”?
2.為什么ip 3Gs和ip 4/4s的屏幕都是3.5寸,但4/4s的屏幕看起來更清晰蚓峦?
3.ip6 Plus 屏幕看起來會比ip6/ip6s更清晰嗎?為什么济锄?
4.小程序是如何做不同分辨率設備的自適應的枫匾?

先要清楚的概念:
  • pt:邏輯分辨率。pt的大小與屏幕的尺寸有關拟淮,可以簡單理解為長度單位;
  • px:物理分辨率谴忧。和屏幕尺寸無關很泊〗浅妫可以簡單理解為像素點;
  • pt與px的關系:1個pt對應幾個px委造,既每個單位長度里有幾個像素點戳鹅。一個pt可以由1個或多個px構成;
  • ip6下昏兆,1個pt有2個px構成(375 x 667 pt; 750 x 1334 px)枫虏;
  • Render屏:又稱為視網(wǎng)膜屏,意思是屏幕的1個單位的像素密度已經(jīng)達到人眼能分辨的極限爬虱,如果在該單位下再增加像素隶债,人類視覺上并不會覺得更加清晰(1個單位的像素密度為2px (@2x));
  • 通常稱ip 3GS稱為非Render屏跑筝,4/4s(或以上)稱為Render屏死讹;
  • 我們所說的屏幕尺寸并不是指長或寬,而是屏幕的對角線
移動端分辨率解析:

我們經(jīng)常會看到一樣移動設備分辨率的對比圖曲梗,如下


image.png

從圖中可以看到赞警,Render是px與pt的倍數(shù)關系,既一個pt下有多少個px虏两。

1.解答問題1:為什么4比3GS清晰?
圖中可以看到愧旦,3GS和4的屏幕一樣大,都是3.5寸(既邏輯分辨率pt都是320x480),但是物理分辨率px卻不同(看圖)定罢,他們的關系是:
在3GS中笤虫,1個單位的pt中有1個px,所以Reader為1倍(既@1x)
在4/4s中引颈,1個單位的pt中由2個px耕皮,所以Reader為2倍(既@2x)

2.解答問題2:6Plus不會比6/6s更清晰。
由圖可知蝙场,6Plus的Reader為3倍凌停,既1個單位中有3個像素點,6/6s位2倍售滤,既1個單位中有2個像素點(1pt = 2px))罚拟,已經(jīng)達到了人眼極限,所以看起來6Plus并不會更清晰完箩。

3.解答問題4:小程序是如何做不同分辨率設備的自適應的赐俗?
官方文檔上說
rpx(responsive pixel): 可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx弊知。如在 iPhone6 上阻逮,屏幕寬度為375px,共有750個物理像素秩彤,則750rpx = 375px = 750物理像素叔扼,1rpx = 0.5px = 1物理像素事哭。

4.解答問題3:為什么模擬器下ip6的分辨率是375,而設計圖一般會給750瓜富?
375指的是邏輯分辨率鳍咱,小程序顯示的是邏輯分辨率,即375pt与柑,
750指的是物理分辨率谤辜,設計師給的一般都是物理分辨率,750px价捧,
根據(jù):
在ip6下1rpx=0.5px(小程序的開發(fā)設計原則)和在ip6下Reader為2倍即1pt=2px(由上圖可知)
可知:
1pt = 2px = 2rpx
所以:
375pt = 750px丑念,而750px=375rpx,所以設計稿的750px在小程序開發(fā)時對于的單位是375rpx(即1rpx=0.5px)

總結:

在ip6下1rpx = 0.5px = 1物理像素干旧,不同設備分辨率下小程序會對rpx單位自動轉換渠欺。
開發(fā)微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。
所以最后是:
以ip6作為標準的設計稿時(750x1334 px)椎眯,在開發(fā)小程序時設計稿的1px可以寫成0.5px1rpx挠将。



參考鏈接:https://www.zhihu.com/question/19625584

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市编整,隨后出現(xiàn)的幾起案子舔稀,更是在濱河造成了極大的恐慌,老刑警劉巖掌测,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件内贮,死亡現(xiàn)場離奇詭異,居然都是意外死亡汞斧,警方通過查閱死者的電腦和手機夜郁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來粘勒,“玉大人竞端,你說我怎么就攤上這事∶硭” “怎么了事富?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長乘陪。 經(jīng)常有香客問我统台,道長,這世上最難降的妖魔是什么啡邑? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任贱勃,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘募寨。我一直安慰自己慈格,他們只是感情好薪韩,可當我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布刺下。 她就那樣靜靜地躺著盼理,像睡著了一般犁苏。 火紅的嫁衣襯著肌膚如雪纹蝴。 梳的紋絲不亂的頭發(fā)上华蜒,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天官册,我揣著相機與錄音宾茂,去河邊找鬼瓷马。 笑死,一個胖子當著我的面吹牛跨晴,可吹牛的內(nèi)容都是我干的欧聘。 我是一名探鬼主播,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼端盆,長吁一口氣:“原來是場噩夢啊……” “哼怀骤!你這毒婦竟也來了?” 一聲冷哼從身側響起焕妙,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤蒋伦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后焚鹊,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痕届,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年末患,在試婚紗的時候發(fā)現(xiàn)自己被綠了研叫。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡璧针,死狀恐怖嚷炉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情陈莽,我是刑警寧澤渤昌,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站走搁,受9級特大地震影響独柑,放射性物質發(fā)生泄漏。R本人自食惡果不足惜私植,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一忌栅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦索绪、人聲如沸湖员。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽娘摔。三九已至,卻和暖如春唤反,著一層夾襖步出監(jiān)牢的瞬間凳寺,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工彤侍, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留肠缨,地道東北人。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓盏阶,卻偏偏與公主長得像晒奕,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子名斟,可洞房花燭夜當晚...
    茶點故事閱讀 42,925評論 2 344

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