小程式開發中的單位如何佈局使用？(經驗)
小程式支援的單位？
可以說小程式就是在微信體系網頁的另一種表現方式。網頁中的單位小程式基本都支援。但實際開發中，我常用到的是以下幾種 ↓
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