一、移动端优先

一般建议直接给出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 #{$pad}{font-size: 18rpx;}
}

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

$pad: "(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.pad = true}else{Vue.prototype.pad = false}}
});

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

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

uniapp页面适配平板和手机相关推荐

可适配平板、手机的Web开发方式
作为一个web前端开发人员,网站需要在手机和平板上正常显示已成为共识,之前一直使用AdminLTE这个模板进行开发,主要使用bootstrap的栅栏模式来保证界面在手机端的正常显示,但是要实现多样的需 ...
移动端Web页面适配方案（整理版）
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计] 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需 ...
电脑PC页面和手机移动页面适配跳转
电脑PC页面和手机移动页面适配跳转 html页面,涉及到检测终端的问题,如果是电脑端,就跳到PC版页面:如果是手持端设备,就跳转到指定的shou网页上. 方法一.@media screen 思路:cs ...
html5+css3适配问题（手机、平板、PC）
html5+css3适配问题(手机.平板.PC)2019-07-29 jiangxin 随着互联网的快速发展,以及html5+css3的迅速崛起.渐渐的响应式布局,也会慢慢的出现在我们的视野里,身为专 ...
【Android 屏幕适配】屏幕适配基础概念 ④ ( 屏幕适配限定符 | 手机/平板电脑设备屏幕适配 )
文章目录一.屏幕适配限定符二.手机/平板电脑设备屏幕适配平板电脑市场占有率密度无关像素计算手机设备限定符平板设备限定符参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声 ...
python四大软件-传智播客解析Python之移动端页面适配四大方式
前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?传智播客为此总结了四种方式,具体如下: 传智播客解析Python之移动端页面适配四大方式 ...
Nginx根据User-Agent适配PC和手机
考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...
Nginx配置站点适配PC和手机
考虑到站点的在多种设备下的兼容性,有非常多站点会有手机版和电脑版两个版本号.訪问同一个站点URL,当服务端识别出用户使用电脑訪问.就打开电脑版的页面,用户假设使用手机訪问,则会得到手机版的页面. 1. ...
Nginx 配置网站适配PC和手机
为什么80%的码农都做不了架构师?>>> 考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电 ...

uniapp页面适配平板和手机