Styles and Layouts (rpx units, Flex layout)

In uni-app development, styling and layout are core components of building interfaces. The rpx unit and Flex layout are two commonly used technologies that help developers achieve responsive design and flexible page structures.

rpx Unit

rpx (responsive pixel) is a unique responsive unit in uni-app that can adaptively scale based on screen width. 1rpx is equal to 1/750 of the screen width, so when the design draft is 750px wide, 1rpx equals 1px. This design allows developers to more easily adapt to different screen sizes.

Use Cases for rpx

rpx is particularly suitable for scenarios requiring adaptation to multiple screen sizes. For example, when designing a button, if you want the button to appear proportionally consistent across all devices, you can use the rpx unit:

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

In this example, the button's width and height will automatically adjust based on the screen width, ensuring a consistent display across different devices.

Conversion Between rpx and px

In actual development, designers may provide design drafts in px units. If the design draft width is 750px, you can directly convert px values to rpx values. For example, if an element in the design draft is 375px wide, it converts to 375rpx. If the design draft width is not 750px, you can calculate it proportionally:

rpx = (element width in design draft / total width of design draft) * 750

For example, if the design draft width is 375px and an element is 100px wide, the corresponding rpx value is:

(100 / 375) * 750 = 200rpx

Notes on rpx

Although rpx is very convenient, there are some considerations:

1. Font Size: Smaller fonts (e.g., below 12px) may appear too small on some high-resolution devices. It is recommended to use px units in such cases.
2. Border Width: A 1rpx border may display as 0 on high-resolution devices. In such cases, you can use 0.5px or 1px instead.

Flex Layout

Flex layout is a modern layout method that enables the easy implementation of complex page structures. uni-app supports Flex layout, allowing developers to quickly build flexible interfaces using display: flex and related properties.

Flex Container and Items

Flex layout consists of a container (parent element) and items (child elements). The container is defined as a Flex layout using display: flex, and the child elements become Flex items.

<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;
}

In this example, .container is the Flex container, and .item are Flex items. flex-direction: row indicates horizontal arrangement, and justify-content: space-between evenly distributes the items.

Common Properties of Flex Containers

1. flex-direction: Defines the direction of item arrangement. Options include row (horizontal), column (vertical), row-reverse, and column-reverse.
2. justify-content: Defines the alignment of items along the main axis. Options include flex-start, flex-end, center, space-between, and space-around.
3. align-items: Defines the alignment of items along the cross axis. Options include flex-start, flex-end, center, baseline, and stretch.
4. flex-wrap: Determines whether items wrap. Options include nowrap (no wrap), wrap (wrap), and wrap-reverse (reverse wrap).

Common Properties of Flex Items

1. flex-grow: Defines the item's ability to grow. Default is 0 (no growth).
2. flex-shrink: Defines the item's ability to shrink. Default is 1 (can shrink).
3. flex-basis: Defines the initial size of the item. Default is auto.
4. align-self: Allows an individual item to override the align-items property.

Example of Flex Layout

Here is a common Flex layout example for a top navigation bar:

<view class="navbar">
  <view class="left">Back</view>
  <view class="center">Title</view>
  <view class="right">Menu</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;
}

In this example, .navbar is the Flex container, .left and .right have fixed widths, and .center uses flex: 1 to occupy the remaining space.

Combining rpx and Flex Layout

rpx and Flex layout can be combined to achieve more flexible responsive designs. For example, the following code implements an adaptive grid layout:

<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;
}

In this example, .grid uses Flex layout with wrapping enabled, and .item uses rpx units to define width and height, ensuring consistency across different screen sizes.

Common Issues and Solutions

Limitations of rpx in Native Components

Some native components in uni-app (e.g., video, map) do not support rpx units. In such cases, you can use the upx2px function to convert rpx to px:

const width = uni.upx2px(750); // Converts 750rpx to px value

Compatibility of Flex Layout

Flex layout is well-supported in modern browsers, but some older devices may require prefixes. uni-app's compiler handles these issues automatically, so no additional configuration is needed.

Implementing Complex Layouts

For more complex layouts, you can combine Flex layout with absolute positioning. For example, to implement a fixed bottom button:

<view class="container">
  <view class="content">Content Area</view>
  <view class="footer">
    <button class="button">Submit</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%;
}