uniapp自适应

uniapp自适应方案

uniapp实现自适应主要依靠弹性布局、百分比单位、rpx单位以及媒体查询等技术。以下为常用方法：

使用rpx单位 rpx是uniapp特有的自适应单位，可根据屏幕宽度自动调整大小。设计稿通常以750px为基准，1rpx等于屏幕宽度除以750。在CSS中直接使用rpx单位即可实现元素自适应。

.container {
  width: 750rpx; /* 满屏宽度 */
  font-size: 28rpx; /* 自适应字体 */
}

Flex弹性布局 Flex布局能自动分配容器内元素的空间，适合构建响应式界面。通过设置display: flex和相关属性实现元素的自适应排列。

.parent {
  display: flex;
  justify-content: space-between;
}
.child {
  flex: 1;
}

百分比与视口单位 结合百分比（%）和视口单位（vw/vh）可实现基于屏幕尺寸的缩放。例如，设置宽度为50%表示占父容器一半，而50vw则表示占视口宽度的一半。

.box {
  width: 50%;
  height: 20vh;
}

媒体查询适配 通过@media针对不同屏幕尺寸编写差异化样式。适用于复杂布局或特定设备的样式调整。

@media screen and (max-width: 600px) {
  .header {
    font-size: 24rpx;
  }
}

uniapp内置组件适配 uniapp的<view>、<text>等组件默认支持自适应特性。推荐优先使用这些组件而非HTML原生标签，以确保跨平台兼容性。

动态计算样式 在JavaScript中通过uni.getSystemInfoSync()获取屏幕信息，动态计算样式值并应用到元素上。

const systemInfo = uni.getSystemInfoSync();
const windowWidth = systemInfo.windowWidth;
this.setData({
  elementWidth: windowWidth * 0.8
});

注意事项

• 设计稿建议使用750px宽度，便于rpx单位换算。
• 避免固定像素（px）单位，优先使用rpx或百分比。
• 图片资源可通过mode="widthFix"实现高度自适应。
• 测试时需覆盖不同尺寸设备，确保布局一致性。