样式与布局（rpx 单位、Flex 布局）

在 uni-app 开发中，样式与布局是构建界面的核心部分。rpx 单位和 Flex 布局是两种常用的技术，能够帮助开发者实现响应式设计和灵活的页面结构。

rpx 单位

rpx（responsive pixel）是 uni-app 中特有的响应式单位，它可以根据屏幕宽度进行自适应缩放。1rpx 等于屏幕宽度的 1/750，因此在设计稿宽度为 750px 时，1rpx 就是 1px。这种设计使得开发者可以更方便地实现不同屏幕尺寸的适配。

rpx 的使用场景

rpx 特别适合用于需要适配多种屏幕尺寸的场景。例如，在设计一个按钮时，如果希望按钮在所有设备上看起来比例一致，可以使用 rpx 单位：

.button {
  width: 200rpx;
  height: 80rpx;
  font-size: 28rpx;
}

在这个例子中，按钮的宽度和高度会根据屏幕宽度自动调整，确保在不同设备上显示效果一致。

rpx 与 px 的转换

在实际开发中，设计师可能会提供以 px 为单位的设计稿。如果设计稿宽度为 750px，可以直接将 px 值转换为 rpx 值。例如，设计稿中一个元素的宽度为 375px，转换为 rpx 就是 375rpx。如果设计稿宽度不是 750px，可以通过比例计算：

rpx = (设计稿元素宽度 / 设计稿总宽度) * 750

例如，设计稿宽度为 375px，某个元素宽度为 100px，则对应的 rpx 值为：

(100 / 375) * 750 = 200rpx

rpx 的注意事项

虽然 rpx 非常方便，但在某些情况下需要注意：

1. 字体大小：较小的字体（如 12px 以下）在某些高分辨率设备上可能显示过小，建议使用 px 单位。
2. 边框宽度：1rpx 的边框在高分辨率设备上可能显示为 0，此时可以使用 0.5px 或 1px。

Flex 布局

Flex 布局是一种现代的布局方式，能够轻松实现复杂的页面结构。uni-app 支持 Flex 布局，开发者可以通过 display: flex 和相关属性快速构建灵活的界面。

Flex 容器与项目

Flex 布局分为容器（父元素）和项目（子元素）。容器通过 display: flex 定义为 Flex 布局，子元素则成为 Flex 项目。

<view class="container">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
</view>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.item {
  width: 200rpx;
  height: 200rpx;
  background-color: #f0f0f0;
}

在这个例子中，.container 是 Flex 容器，.item 是 Flex 项目。flex-direction: row 表示项目水平排列，justify-content: space-between 表示项目之间均匀分布。

Flex 容器的常用属性

1. flex-direction：定义项目的排列方向，可选值包括 row（水平）、column（垂直）、row-reverse 和 column-reverse。
2. justify-content：定义项目在主轴上的对齐方式，可选值包括 flex-start、flex-end、center、space-between 和 space-around。
3. align-items：定义项目在交叉轴上的对齐方式，可选值包括 flex-start、flex-end、center、baseline 和 stretch。
4. flex-wrap：定义项目是否换行，可选值包括 nowrap（不换行）、wrap（换行）和 wrap-reverse（反向换行）。

Flex 项目的常用属性

1. flex-grow：定义项目的放大比例，默认为 0（不放大）。
2. flex-shrink：定义项目的缩小比例，默认为 1（可缩小）。
3. flex-basis：定义项目的初始大小，默认为 auto。
4. align-self：允许单个项目与其他项目有不同的对齐方式，覆盖 align-items。

Flex 布局的示例

以下是一个常见的 Flex 布局示例，实现一个顶部导航栏：

<view class="navbar">
  <view class="left">返回</view>
  <view class="center">标题</view>
  <view class="right">菜单</view>
</view>

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  background-color: #ffffff;
}
.left, .right {
  width: 150rpx;
  text-align: center;
}
.center {
  flex: 1;
  text-align: center;
}

在这个例子中，.navbar 是 Flex 容器，.left 和 .right 固定宽度，.center 使用 flex: 1 占据剩余空间。

rpx 与 Flex 布局的结合

rpx 和 Flex 布局可以结合使用，实现更灵活的响应式设计。例如，以下代码实现了一个自适应的网格布局：

<view class="grid">
  <view class="item" v-for="i in 6" :key="i">Item {{i}}</view>
</view>

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: 350rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
  background-color: #f0f0f0;
}

在这个例子中，.grid 使用 Flex 布局并允许换行，.item 使用 rpx 单位定义宽度和高度，确保在不同屏幕尺寸下显示一致。

常见问题与解决方案

rpx 在原生组件中的限制

uni-app 中的部分原生组件（如 video、map）不支持 rpx 单位。此时可以使用 upx2px 函数将 rpx 转换为 px：

const width = uni.upx2px(750); // 将 750rpx 转换为 px 值

Flex 布局的兼容性

Flex 布局在现代浏览器中支持良好，但在某些低版本设备上可能需要添加前缀。uni-app 的编译器会自动处理这些问题，开发者无需额外配置。

复杂布局的实现

对于更复杂的布局，可以结合使用 Flex 布局和绝对定位。例如，实现一个固定在底部的按钮：

<view class="container">
  <view class="content">内容区域</view>
  <view class="footer">
    <button class="button">提交</button>
  </view>
</view>

.container {
  position: relative;
  height: 100vh;
}
.content {
  padding-bottom: 120rpx;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button {
  width: 80%;
}