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;
}

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

Answer 2

1.uniapp 适配移动端的逻辑
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，它的目的是让开发者可以使用统一的前端代码开发出同一份代码在多个平台（iOS、Android、H5、小程序等）上运行的应用，且能够表现一致。因此，它内置了智能的适配方案，只需要开发者在不同平台之间维护不同的视图层就可以实现跨平台适配。

2.
小程序采用了 WXML 和 WXSS 两种模板，分别对应 HTML 和 CSS。
小程序可以使用 App、Page、Component 等组件和模块，来实现小程序界面的构建。
小程序的API接口可以实现数据交互，比如数据缓存，网络请求等。
小程序通过封装 Weixin JS-SDK，实现了多个基础库，比如支付、地理位置等功能。
小程序由运行时环境（JavaScriptCore）和原生环境（Native）构成，从而实现跨平台适配移动端。

方案：
1.首先要根据不同机型，添加或者重写css样式，例如：

@media screen and (min-width:320px) and (max-width:414px){

/* iphone 6-7-8 plus */

}

@media screen and (min-width:375px) and (max-width:667px){

/* iphone 6-7-8 */

}

@media screen and (min-width:414px) and (max-width:736px){

/* iphone x */

}

@media screen and (min-width:768px) and (max-width:1024px){

/* ipad */

}

2.使用uni-app官方提供的组件flexible组件，它可以自动适配不同屏幕尺寸，以及自动调整字体大小。

3.使用第三方插件，如lib-flexible，它可以自动根据不同的设备和分辨率，计算出正确的布局尺寸，从而达到自适应的效果。

4.使用vw和vh单位，通过设置不同设备的宽度和高度，来改变布局的样式，从而实现自适应的效果。

Answer 3

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这篇文章：uniapp解决跨域问题 也许有你想要的答案，你可以看看

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^