uniapp布局规范
uniapp布局规范概述
uniapp的布局规范主要基于Flexbox模型，同时兼容传统CSS布局方式。开发者可以使用rpx单位实现自适应布局，确保在不同尺寸设备上正常显示。
基础布局单位
使用rpx（responsive pixel）作为基础单位，1rpx等于屏幕宽度的1/750。设计稿通常按照750px宽度制作，直接换算为rpx单位：
- 设计稿元素宽度为100px → 写成100rpx
- 设计稿字体大小为24px → 写成24rpx
Flex布局实现
通过display:flex属性创建弹性容器，常用属性包括：
- flex-direction：决定主轴方向（row/column）
- justify-content：主轴对齐方式（flex-start/center/space-between）
- align-items：交叉轴对齐方式（flex-start/center/stretch）
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}百分比布局
结合百分比和rpx单位实现响应式布局：
.box {
width: 50%;
height: 200rpx;
margin: 0 auto;
}栅格系统
通过uni-row和uni-col组件实现栅格布局：
<uni-row>
<uni-col span="8">左侧</uni-col>
<uni-col span="16">右侧</uni-col>
</uni-row>定位布局
支持CSS标准定位方式：
- position: relative/absolute/fixed/sticky
- 配合top/right/bottom/left属性使用
.fixed-btn {
position: fixed;
right: 20rpx;
bottom: 20rpx;
}安全区域适配
处理全面屏设备底部安全区域：
.safe-area {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}媒体查询适配
针对不同屏幕尺寸进行适配：
@media screen and (min-width: 768px) {
.container {
max-width: 750rpx;
}
}组件间距规范
推荐使用统一间距变量：
:root {
--spacing-sm: 10rpx;
--spacing-md: 20rpx;
--spacing-lg: 30rpx;
}
.item {
margin-bottom: var(--spacing-md);
}注意事项
避免在组件中直接使用px单位，优先考虑rpx。复杂布局建议拆分为多个组件实现，保持代码可维护性。全局样式建议定义在App.vue中，局部样式使用scoped属性限定作用域。
