網(wǎng)頁美工設(shè)計(jì)

微信小程序尺寸單位rpx和px怎么換算

編輯：時(shí)間：2018-05-08 08:22:44

　　rpx是微信小程序新推出的一個(gè)單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信還搗鼓出新的rpx單位?

　　【像素Pixel】像素是圖像的基本采樣單位，它不是一個(gè)確定的物理量，因?yàn)橄袼攸c(diǎn)的物理大小是不確定的。

　　【分辨率】分辨率是屏幕像素的數(shù)量，一般用屏幕寬度的像素點(diǎn)乘以屏幕高度的像素點(diǎn)。如描述iphone6的分辨率是750*1334.

　　分辨率又分為【物理分辨率】和【邏輯分辨率】，值得注意的是實(shí)際工作中設(shè)計(jì)師常常給的是物理分辨率，程序中用到的是邏輯分辨率，但是都稱為分辨率，容易混淆。

　　【物理分辨率】是硬件所支持的分辨率，【邏輯分辨率】是軟件可以達(dá)到的分辨率。

　　物理分辨率和邏輯分辨率的商稱為【像素倍率dpr】，也就是常說的幾倍屏。

　　iphone6的分辨率寫著375*667，這里指的就是它的邏輯分辨率。我們上面提的750*1334則是它的物理分辨率。所以iphone6的像素倍率=(750*1334)/(375*667)=2

　　理解了上述的幾個(gè)概念，我們就可以接著來看下面的幾個(gè)單位。

　　【px】px就是Pixel的縮寫，就是指像素。這個(gè)作為圖片采樣的基本單位，沒什么需要特別說明的。

　　【rem】在做移動(dòng)端適配是最常用的方法就是使用rem作為單位，因?yàn)閞em是根據(jù)html的fontsize去動(dòng)態(tài)計(jì)算實(shí)際的px的。

　　所以常常應(yīng)用這點(diǎn)，做反向使用。即根據(jù)屏幕大小動(dòng)態(tài)的設(shè)置fontsize.來達(dá)到不同的分辨率下有一樣的效果。

　　【rpx】rpx其實(shí)是微信對于rem的一種應(yīng)用的規(guī)定，或者說一種設(shè)計(jì)的方案，官方上規(guī)定屏幕寬度為20rem，規(guī)定屏幕寬為750rpx。

微信小程序尺寸單位rpx和px怎么換算

　　所以在微信小程序中1rem=750/20rpx。

　　但是這不是我們要關(guān)注的重點(diǎn)。

　　在使用rem時(shí)，我們常常讓設(shè)計(jì)師根據(jù)iphone6的標(biāo)準(zhǔn)出設(shè)計(jì)稿。因?yàn)槿绻詉phone6為標(biāo)準(zhǔn)，并且在iphone6上將fontsize設(shè)置成62.5%。

　　那么1rem就等于10px，我們只要將設(shè)計(jì)師標(biāo)注的尺寸(一般標(biāo)注的是物理分辨率)除以20就可以得到單位為rem的數(shù)值了。

　　在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

　　css中的px與設(shè)備的物理像素并非絕對的一比一關(guān)系。

　　px與物理像素的比例與設(shè)備的dpr(像素倍率)有關(guān)。

　　rpx稱為相對像素值，rpx與物理像素也并非絕對的一比一關(guān)系。

　　wxss將設(shè)備寬定義為750rpx，是以iPhone6的分辨率(750x1334)為基準(zhǔn)劃分的。

　　也就是說，在iPhone6上，1rpx=1物理像素=0.5px。

　　因?yàn)樵O(shè)計(jì)師標(biāo)注的尺寸一般是物理分辨率。所以如果以iphone6為標(biāo)準(zhǔn)出設(shè)計(jì)稿的話，那么我們就可以不需要經(jīng)過換算直接標(biāo)準(zhǔn)rpx。

　　rpx實(shí)際上就是系統(tǒng)級的rem(把頁面按比例分割750份，1rpx=window.innerWidth/750)。也就是說，微信小程序的rpx布局幫大家把rem布局的js設(shè)置根元素字體尺寸這步省了，或者減少了scale伸縮布局不能開啟gpu raster的問題。通過rpx，大家只需要根據(jù)750的設(shè)計(jì)稿寫代碼即可，不必?fù)?dān)心它在各個(gè)平臺(tái)的適配情況，實(shí)際上在各個(gè)平臺(tái)都會(huì)長得一樣，從此媽媽再也不用擔(dān)心我的頁面適配問題啦。

<< 上一篇：2018年較新網(wǎng)頁設(shè)計(jì)流行趨勢分析

>> 下一篇：現(xiàn)在正在流行的3種網(wǎng)頁設(shè)計(jì)趨勢

推薦資訊