小程序支持的單位？
可以說小程序就是在微信體系網頁的另一種表現方式。網頁中的單位小程序基本都支持。但實際開發中，我常用到的是以下幾種 ↓
rpx
rpx做為小程序自家系統里的單位，特性是可以根據屏幕寬度進行自適應。rpx官方介紹
比如我寫一個2:1比例的全屏輪播圖，可以這樣寫：
swiper { width:750rpx; height:375rpx; }
1rpx = 0.5px = 1物理像素。網頁開發中，默認字體一般設置為14px，在小程序中我們就可以設置小程序的默認字體大小為28rpx。
px
在小程序開發中 rpx基本就代替了px，但在一些特殊的場合，px的表現要比rpx好。
兼容ipad時，由於ipad可以橫屏和豎屏，並且屏幕寬度可以達到2K以上，如果你的小程序要考慮到兼容ipad，那么還是多考慮使用px吧。
覆蓋微信原生組件樣式。em？？？？可以覆蓋微信原生樣式？？？
是的，只有小程序老玩家才知道的秘密！小程序原生樣式是可以覆蓋美化的，以 <switch> 組件為例：switch代碼片段
導入代碼片段到開發者工具中，並切換設備模式預覽可以發現rpx表現不佳。使用px反而更好。
em與rem
em與rem在H5的網頁開發上可以大放異彩，但小程序中因為有rpx的存在，em與rem使用的就少了。基本只有在一些對字體寬度有特效的情況下才會使用。比如首行縮進。
vw、vh和百分比
vw：視窗寬度，1vw等於視窗寬度的1%。
vh：視窗高度，1vh等於視窗高度的1%。
%：父級容器的寬度百分百。
——————————————————————***重點來了***————————————————————————————
calc() 的使用
前面講了單位，那么我們現在來聊聊怎么使用這些單位了。小程序是網頁的一種，支持css，也支持calc()。
這里吃下書：
calc() 函數用於動態計算長度值。
● 需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
● 任何長度值都可以使用calc()函數進行計算；
● calc()函數支持 "+", "-", "*", "/" 運算；
● calc()函數使用標准的數學運算優先級規則；
使用場景示例
垂直導航頁，常用於外賣訂餐或者商城的二級分類頁。
上半部分是定死高度375rpx的輪播圖區域，下半部分是可以隨設備高度變化的可滾動的區域。容器高度可以這樣寫：
{
height:calc(100vh - 375rpx)
}
原文地址：https://developers.weixin.qq.com/community/develop/article/doc/000c0e6fec44f8bec0287dcd656813