概覽

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

尺寸

可以參考

舉例：

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

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

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

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

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

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

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

參考

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

如果使用具體值

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

但是在瀏覽器中查看的時(shí)候，選擇iphoneX型號(hào)，縱向填充不滿(mǎn)，這個(gè)應(yīng)該方式是不考慮的

選擇（web和小程序）

注意，因?yàn)檫\(yùn)行到瀏覽器有uni-page-body標(biāo)簽，而運(yùn)行到小程序是沒(méi)有的：

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

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

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

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