uniapp页面适配平板和手机_uniapp布局如何适配

一、移动端优先

一般建议直接给出750px的手机设计稿，通过rpx等比缩放。这里需要注意的是uniapp默认适配的最大屏幕宽度为960px，超过这个范围rpx将不生效，而某些平板的尺寸比如ipad pro宽度超过了这个数值，所以需要在pages.json中添加配置：

"globalStyle": {
	"rpxCalcMaxDeviceWidth": 1024, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
	"rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
	"rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
},
1
2
3
4
5

二、平板优先

如果项目组给的是平板尺寸设计稿，这时候进行适配有许多注意事项。

1. 将设计稿尺寸改为750px，并添加配置（同第一点）

2. 字体适配

rpx等比缩放方案可能将字体变的过大或过小，而浏览器端文字大小最小为12px，app中字体虽然没有最小限制，但是字体过小看的不舒适，不小于14px较为合适。
（1）使用px
固定字体大小，手机端字体大小为平板字体差不多两倍，此办法灵活性较低
（2）使用媒体查询
uniapp默认字体大小24~28rpx，此字体大小合理所以无须改动，但是在平板上会变的过大，所以我们可以使用媒体查询将平板的正文字体设置为16rpx左右，在App.vue中全局设置即可，其他字体例如标题可以单独设置大小，这样可以减轻工作量。

page{
	@media #{$pad}{
		font-size: 18rpx;
	}
}
1
2
3
4
5

使用媒体的灵活性较高，但是可能让我们的代码变得繁琐，而scss可以让我们优雅的编写媒体查询代码，在全局scss文件中添加变量：

$pad: "(min-width: 500px) and (max-width: 1366px)"; //平板
$phone: "(min-width: 0px) and (max-width: 500px)"; //手机
1
2

3. 布局

(1). 平板由于宽度比手机大，设计稿中左右两栏的布局在移动端改为单栏布局
(2). 某些尺寸在手机端不应该缩小而应该放大，放大的比例大致为手机字体/平板字体
(3). 有些样式方面例如使用某组件，可能需要用到js控制，uniapp判断是平板还是手机的代码：

// 判断是否是平板
uni.getSystemInfo({
	success: (res)=>{
		console.log("屏幕尺寸：", res.windowWidth, res.windowHeight)
		if(res.windowWidth > 500){
			Vue.prototype.pad = true
		}else{
			Vue.prototype.pad = false
		}
	}
});
1
2
3
4
5
6
7
8
9
10
11

由于添加到Vue原型上，则可以在每个页面上直接使用pad属性判断
例如，使用uview网格布局，在平板上显示3列，在手机端显示两列：

<u-grid :col="pad ? 3 : 2" :border="false">
	<u-grid-item>
		网格内容
	</u-grid-item>
</u-grid>
1
2
3
4
5