1. Uniapp简介
Uniapp是一个跨平台开发框架，能够快速开发高效的应用程序。由于Uniapp支持各种主流平台，如H5网页、iOS、Android、微信小程序等，因此它成为了开发跨平台应用的首选。
2. 为什么需要屏幕自适应
随着不同尺寸的设备日益增多，我们在开发应用程序时需要确保它们的呈现在各种屏幕大小和分辨率下正常。本质上，屏幕自适应就是确保应用程序能够根据设备屏幕大小进行适应和自动调整布局的机制，使得应用程序的呈现在各种设备上都能够得到最佳的效果和体验。
2.1 适配方案
现在市场上有许多不同的适配方案，以适应不同的设备和分辨率。例如：
Flexible布局：这种布局通过设置根元素的字体大小为屏幕宽度的百分比来实现。
rem布局：在rem布局中，元素大小相对于根元素(html)的字体大小进行设置。
vw/vh布局：vw/vh布局基于视口宽度和高度的单位进行尺寸设置。
这里我们重点介绍Flexible布局。
2.2 Flexible布局
在Flexible布局中，我们通过动态改变根元素html的字体大小，来适应不同尺寸的设备。通常情况下，我们会设置一个固定的基准值，如750px，来表示设计图的宽度。这个基准值可以是任何值，不过为了方便计算，一般选择一个整数值。
下面是一个基本设置示例：
// 在index.html中添加如下的meta信息
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
// 在main.js中添加如下的代码
const baseSize = 75
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽度的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
在上面的代码中，我们通过baseSize来设置根元素的字体大小。在这个例子中，我们将基准值设置成了75px。我们在设置时，用当前设备的宽度(通过document.documentElement.clientWidth)除以我们的基准值并与2取较小值，来得到缩放比例(注意，取最小值是为了避免出现放大视图的尴尬情况)。
然后，在设置完缩放比例之后，我们再把缩放比例乘以我们的基准值，并附加上“px”的单位，得到根元素html的字体大小。这段代码中，我们还增加了对浏览器窗口的调整大小的监听。这样可以确保当用户调整浏览器窗口大小时，我们的可缩放布局能够随之自适应。
3. 在Uniapp中实现自适应屏幕
对于Uniapp，我们可以在入口文件App.vue中添加上述的代码。此外，我们还需要在uni.scss中添加一些其他样式：
// uni.scss
// 安卓和iOS通用的1px边框
@media only screen and (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
.uni-hairline{
border-width: 0.5px !important;
}
.uni-nbfc {
background-color: transparent !important;
}
}
.wrap {
background-color: #fff;
min-height: 100vh;
box-sizing: border-box;
font-size: 14px;
color: $text-color;
.uni-padding-wrap {
min-height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 44px);
}
}
在上面的代码中，我们定义了一个wrap类，其中设置了一些必要的属性。其中，计算min-height是确保在不同的设备和分辨率下，都能正确地显示需要展示的内容。此外，还需要注意的是我们在样式表中增加了安卓和iOS通用的1px边框的样式，这对于保证UI界面的清晰度和美观是非常关键的。
最后，我们把入口文件App.vue中所有的css单位全部替换为rem即可。
4. 总结
在本文中，我们介绍了Uniapp自适应屏幕的思路和步骤。有效的屏幕自适应方案，可以确保您的应用程序以最佳的效果和体验呈现在各种设备和分辨率上。
在这个过程中，我们最关键的步骤是通过动态调整根元素字体大小来实现等比缩放。同时，我们还需要设置一些必要的CSS属性和样式来确保应用程序在不同的设备和分辨率下都能达到最佳显示效果。如果您按照上述步骤来实现自适应屏幕，相信您的应用程序会在各种设备上都能够表现得相当出色。
参考文献:
Uniapp官方文档：https://uniapp.dcloud.io/frame