uniapp中@media适配手机平板的具体实现方法

在uniapp中如何使用@media实现手机和平板设备的样式适配？具体应该如何编写媒体查询条件？能否提供一些常见的屏幕尺寸断点示例？需要注意哪些兼容性问题？

2 回复

在uniapp中实现@media适配，可以这样操作：

  1. 在App.vue的<style>标签中定义媒体查询
[@media](/user/media) screen and (max-width: 768px) {
  /* 手机样式 */
}
[@media](/user/media) screen and (min-width: 769px) and (max-width: 1024px) {
  /* 平板样式 */
}
  1. 结合rpx单位使用
  2. 通过uni.getSystemInfo获取设备信息动态调整

建议：优先使用flex布局+rpx单位，媒体查询作为补充方案。


在 UniApp 中，使用 [@media](/user/media) 查询适配手机和平板主要通过 CSS 媒体查询实现，结合 rpx 单位或 flex 布局，确保响应式设计。以下是具体实现方法：

1. 使用 CSS 媒体查询

在 App.vue 或页面的 <style> 标签中定义媒体查询规则，根据屏幕宽度区分设备类型。

示例代码：

/* 默认样式（手机端） */
.container {
  padding: 20rpx;
  font-size: 28rpx;
}

/* 平板设备（屏幕宽度 ≥ 768px） */
[@media](/user/media) (min-width: 768px) {
  .container {
    padding: 40rpx;
    font-size: 32rpx;
  }
}

/* 大屏平板或桌面（屏幕宽度 ≥ 1024px） */
[@media](/user/media) (min-width: 1024px) {
  .container {
    padding: 60rpx;
    font-size: 36rpx;
  }
}

说明：

  • 使用 min-width 定义断点（如 768px 对应平板，1024px 对应大屏）。
  • 结合 rpx 单位（1rpx ≈ 0.5px）自动适配不同屏幕密度。

2. 动态适配布局

结合 flex 布局或 grid，根据屏幕尺寸调整排列方式：

.wrapper {
  display: flex;
  flex-direction: column; /* 手机端垂直排列 */
}

[@media](/user/media) (min-width: 768px) {
  .wrapper {
    flex-direction: row; /* 平板端水平排列 */
  }
}

3. 通过 JavaScript 检测屏幕尺寸

在 UniApp 中可使用 uni.getSystemInfoSync() 获取设备信息，动态设置样式或类名：

export default {
  data() {
    return {
      isTablet: false
    };
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.isTablet = systemInfo.screenWidth >= 768; // 判断是否为平板
  }
};

在模板中绑定类名：

<view :class="isTablet ? 'tablet-style' : 'phone-style'">内容</view>

4. 注意事项

  • 断点选择：常用断点参考：手机（<768px）、平板（768px~1024px）、大屏（≥1024px）。
  • 单位选择：优先使用 rpx 或 % 而非 px，以提升适配性。
  • 测试：通过 Chrome 开发者工具模拟不同设备，或真机调试验证效果。

通过以上方法，可灵活实现手机与平板的界面适配，提升用户体验。

回到顶部