概覽

運行到微信小程序，注意下，在瀏覽器查看的時候，是沒有狀態(tài)欄的

尺寸

可以參考

舉例：

若設(shè)計稿寬度為 750px，元素 A 在設(shè)計稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 750，結(jié)果為：100rpx。

若設(shè)計稿寬度為 640px，元素 A 在設(shè)計稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 640，結(jié)果為：117rpx。

若設(shè)計稿寬度為 375px，元素 B 在設(shè)計稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 200 / 375，結(jié)果為：400rpx。

我們的設(shè)計圖寬為1080，那么一個控件寬度為100px，那么就應(yīng)該使用 750*100 / 1080 約為69rpx。我們后面選擇使用百分比的話，字體可以使用這個計算方式

控件寬高百分比設(shè)置

在web中
高度直接設(shè)置100%無效

百分比在uni-app中的使用（page）

參考

這是網(wǎng)絡(luò)提供的一種方式，其實有一種最簡單的方式，就是在每一個頁面中，

如果使用具體值

既然uni-app說自己的尺寸，upx或者rpx是會根據(jù)屏幕尺寸自動適應(yīng)的，他們的標(biāo)準(zhǔn)設(shè)計圖又是750px的，我們可以寫根布局尺寸為750rpx，1350rpx，讓它們自動適應(yīng)

但是在瀏覽器中查看的時候，選擇iphoneX型號，縱向填充不滿，這個應(yīng)該方式是不考慮的

選擇（web和小程序）

注意，因為運行到瀏覽器有uni-page-body標(biāo)簽，而運行到小程序是沒有的：

所以，如果在引入uni-page-body設(shè)置是無效，不管是在app.vue還是在各自的page設(shè)置這個標(biāo)簽，在小程序的時候都是無效的。

所以用uni-page-body標(biāo)簽不適配小程序
使用具體值不匹配特殊尺寸屏幕

還是使用page，經(jīng)測試，在APP上也適配

在每個頁面中使用page，小程序不需要再配置；如果在App.vue中配置，
那么應(yīng)該在小程序的app.wxss中也進(jìn)行配置