uniapp 适配移动端的逻辑是啥？

Question

请问一下怎么适配手机和平板的样式？
市面上各种手机各种各样，平板也是， 用媒体查询适配好这一台另外一台就有问题，有没有什么适配大多数机型的方案呢？
我在网上看到以768rpx来计算？

Answer 1

回答不易，求求您采纳哦 感激不尽

UniApp 是一个使用 Vue.js 开发跨平台应用的框架，可以在 iOS、Android、H5 等多个平台上运行。适配移动端的逻辑是在 UniApp 中使用媒体查询（Media Query）来适配不同的移动设备。

在 UniApp 中，可以使用 rem 单位来适配移动端的样式。rem 单位是相对于根元素（一般是 html 元素）的字体大小的单位，可以在 JavaScript 中动态设置根元素的字体大小，从而实现适配不同的移动设备。

例如，可以在页面加载时计算出设备的宽度，并动态设置根元素的字体大小：

// 计算设备宽度
var deviceWidth = document.documentElement.clientWidth || window.innerWidth;

// 动态设置根元素字体大小
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

然后，就可以使用 rem 单位来适配移动端的样式了：

.container {
  width: 6.4rem;
  height: 4.8rem;
  margin: 0.8rem auto;
  background-color: #fff;
}

关于使用 768rpx 进行适配，这是一种常用的适配方法。它的思想是将设备的宽度固定为 768px，然后再使用 rpx 单位来进行适配。在 UniApp 中，也可以使用这种方法来适配移动端的样式：

// 计算设备宽度
var deviceWidth = document.documentElement.clientWidth || window.innerWidth;

//动态设置根元素字体大小
document.documentElement.style.fontSize = deviceWidth / 7.68 + 'px';

然后，就可以使用 rpx 单位来适配移动端的样式了：

.container {
width: 640rpx;
height: 480rpx;
margin: 80rpx auto;
background-color: #fff;
}

市面上各种手机各种各样，平板也是，但是使用上述适配方法可以适配大多数移动设备，并保证页面在不同设备上呈现出相似的效果。如果需要进一步适配某些特殊的设备，可以使用媒体查询来实现。