uni-ui自适应屏幕大小

### uni-ui 实现屏幕自适应的方法和配置 在开发移动端应用时，屏幕自适应是一个非常重要的功能。uni-app 和 uni-ui 提供了多种方式来实现屏幕自适应，以下是一些常用的方法和配置： #### 1. 使用 `px` 转换为 `rpx` 在 uni-app 中，推荐使用 `rpx` 单位代替传统的 `px` 单位。`rpx` 是一种基于屏幕宽度的相对单位，能够根据设备屏幕宽度自动调整样式大小。例如，在 iPhone6 上，屏幕宽度为 750px，因此 1rpx = 750rpx / 750 = 1px[^1]。 ```css /* 示例：使用 rpx 单位 */ page { background-color: #f5f5f5; padding: 20rpx; /* 根据屏幕宽度自动调整 */ } ``` #### 2. 配置 `manifest.json` 中的 `window` 属性 在项目的 `manifest.json` 文件中，可以通过设置 `window` 属性来实现全局的自适应配置。例如，可以启用 `autoBackToTop` 和 `pull-to-refresh` 等功能[^2]。 ```json { "window": { "navigationBarBackgroundColor": "#007AFF", "navigationBarTextStyle": "white", "backgroundColor": "#f5f5f5", "backgroundTextStyle": "light", "enablePullDownRefresh": true } } ``` #### 3. 使用 Flexbox 布局 Flexbox 是一种强大的布局方式，适用于响应式设计。通过在父容器上设置 `display: flex`，并结合 `flex-direction`、`justify-content` 和 `align-items` 等属性，可以轻松实现屏幕自适应[^1]。 ```css /* 示例：使用 Flexbox 布局 */ .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } ``` #### 4. 动态获取屏幕尺寸 通过 `uni.getSystemInfo` API，可以动态获取设备的屏幕尺寸，并根据这些信息动态调整页面布局[^3]。 ```javascript // 示例：动态获取屏幕尺寸 uni.getSystemInfo({ success: function (res) { console.log('屏幕宽度:', res.windowWidth); console.log('屏幕高度:', res.windowHeight); // 根据屏幕尺寸动态调整样式 } }); ``` #### 5. 使用条件编译 uni-app 支持条件编译功能，可以根据不同的平台（如 H5、小程序、App）编写特定的代码逻辑，从而实现更精细的屏幕自适应。 ```html <!-- 示例：条件编译 --> <view class="container"> <!-- #ifdef MP-WEIXIN --> <text>微信小程序专属样式</text> <!-- #endif --> <!-- #ifdef H5 --> <text>H5 平台专属样式</text> <!-- #endif --> </view> ``` #### 6. 配置 TabBar 自适应 如果项目中有 TabBar，可以通过 `manifest.json` 的 `tabBar` 配置项来确保其在不同屏幕尺寸下的显示效果一致[^2]。 ```json { "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/icons/home.png", "selectedIconPath": "static/icons/home-active.png" }, { "pagePath": "pages/message/message", "text": "消息", "iconPath": "static/icons/message.png", "selectedIconPath": "static/icons/message-active.png" } ] } } ``` --- ### 注意事项 - 在使用 `rpx` 单位时，需要注意不同设备的屏幕比例差异，可能需要额外的适配逻辑。 - 如果项目中包含大量静态图片资源，建议对图片进行压缩处理，并使用相对路径或 CDN 加速加载。 - 对于复杂的交互场景，可以结合 `uni.showToast`、`uni.showLoading` 和 `uni.showModal` 等 API 提升用户体验[^3]。 ---