布局方式与响应式设计

Flex 布局（推荐）

html


<view class="flex-container">
    <view class="flex-item">Item 1</view>
    <view class="flex-item">Item 2</view>
</view>

css

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-item {
    flex: 1;
}

Grid 布局

css

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10rpx;
}

响应式布局技巧
- 使用 rpx 实现屏幕自适应
- 结合 media query 处理不同尺寸设备
- 利用 uni.getSystemInfoSync() 获取设备信息动态调整布局