小程序開發中的單位如何佈局使用？(經驗)

小程序支持的單位？

能夠說小程序就是在微信體系網頁的另外一種表現方式。網頁中的單位小程序基本都支持。但實際開發中，我經常使用到的是如下幾種 ↓

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

原文出處：https://www.cnblogs.com/Webzhoushifa/p/10443745.html