網頁美工設計

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

編輯：時間：2018-05-08 08:22:44

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

　　【像素Pixel】像素是圖像的基本采樣單位，它不是一個確定的物理量，因為像素點的物理大小是不確定的。

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

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

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

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

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

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

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

　　【rem】在做移動端適配是最常用的方法就是使用rem作為單位，因為rem是根據html的fontsize去動態計算實際的px的。

　　所以常常應用這點，做反向使用。即根據屏幕大小動態的設置fontsize.來達到不同的分辨率下有一樣的效果。

　　【rpx】rpx其實是微信對于rem的一種應用的規定，或者說一種設計的方案，官方上規定屏幕寬度為20rem，規定屏幕寬為750rpx。

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

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

　　但是這不是我們要關注的重點。

　　在使用rem時，我們常常讓設計師根據iphone6的標準出設計稿。因為如果以iphone6為標準，并且在iphone6上將fontsize設置成62.5%。

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

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

　　css中的px與設備的物理像素并非絕對的一比一關系。

　　px與物理像素的比例與設備的dpr(像素倍率)有關。

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

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

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

　　因為設計師標注的尺寸一般是物理分辨率。所以如果以iphone6為標準出設計稿的話，那么我們就可以不需要經過換算直接標準rpx。

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

<< 上一篇：2018年較新網頁設計流行趨勢分析

>> 下一篇：現在正在流行的3種網頁設計趨勢

推薦資訊