一、移动端优先

一般建议直接给出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. 将设计稿尺寸改为750px，并添加配置（同第一点）

2. 字体适配

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

page{
    @media #{$tablet}{
        font-size: 18rpx;
    }
}

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

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

3. 布局

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

// 判断是否是平板
uni.getSystemInfo({
    success: (res)=>{
        console.log("屏幕尺寸：", res.windowWidth, res.windowHeight)
        if(res.windowWidth > 500){
            Vue.prototype.tablet = true
        }else{
            Vue.prototype.tablet = false
        }
    }
});

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

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