uniapp自适应

uniapp 自适应方案

uniapp 实现自适应主要依赖 rpx 单位和 flex 布局，结合动态计算和媒体查询可覆盖多端适配需求。

使用 rpx 单位

rpx 是 uniapp 的响应式像素单位，以 750rpx 为基准宽度（对应设计稿 750px）。在不同屏幕下自动缩放：

.container {
  width: 750rpx; /* 满屏宽度 */
  font-size: 28rpx; /* 相当于设计稿28px */
}

换算公式：
设备实际宽度（px）= 设计稿元素宽度（px） × （设备屏幕宽度 / 750）

弹性布局（Flex）

Flex 布局能自动填充剩余空间：

.parent {
  display: flex;
}
.child {
  flex: 1; /* 均分宽度 */
}

动态计算窗口尺寸

通过 uni.getSystemInfoSync() 获取屏幕信息：

const systemInfo = uni.getSystemInfoSync();
const windowWidth = systemInfo.windowWidth;
const scale = windowWidth / 750; // 计算缩放比例

条件编译处理平台差异

使用 #ifdef 区分平台样式：

/* #ifdef H5 */
.header { height: 88px; }
/* #endif */
/* #ifdef MP-WEIXIN */
.header { height: 44px; }
/* #endif */

媒体查询补充适配

针对特殊分辨率补充样式：

@media (max-width: 640px) {
  .card { width: 90%; }
}

注意事项

• 设计稿建议按 750px 宽度制作
• 图片资源建议使用 @2x 和 @3x 多倍图
• 复杂布局可结合 calc() 动态计算
• 避免直接使用 px，优先 rpx 和百分比

通过组合上述方法，可实现从手机到平板的多端自适应效果。实际开发中建议通过真机调试验证各平台表现。