uniapp布局规范
uniapp布局规范
uniapp基于Vue.js框架，支持多端开发，其布局规范遵循Flexbox模型，同时兼容各平台差异。以下是核心布局规范和实践建议：
视图容器与基础组件
使用<view>作为基础容器组件，替代HTML中的<div>。支持Flex布局属性如display: flex、flex-direction、justify-content等。所有组件默认display: block，需显式声明Flex属性。
<view class="container">
<view class="item">1</view>
<view class="item">2</view>
</view>.container {
display: flex;
justify-content: space-around;
}
.item {
flex: 1;
}响应式单位
推荐使用rpx（responsive pixel）作为单位，可根据屏幕宽度自适应缩放。750rpx等于设计稿中的750px（基于iPhone6标准），在不同设备上自动换算为实际像素。
.button {
width: 200rpx; /* 在750px设计稿中占200px */
height: 80rpx;
}平台差异处理
通过条件编译解决多端样式差异。在CSS中使用/* #ifdef MP-WEIXIN */等注释标记平台专属样式：
.title {
font-size: 32rpx;
/* #ifdef H5 */
line-height: 1.5; /* H5特有样式 */
/* #endif */
}安全区域适配
全面屏设备需处理底部安全区域。使用env(safe-area-inset-bottom)和constant()：
.tabbar {
padding-bottom: calc(10px + constant(safe-area-inset-bottom));
padding-bottom: calc(10px + env(safe-area-inset-bottom));
}滚动性能优化
列表滚动推荐使用<scroll-view>组件而非页面级滚动。设置scroll-y启用纵向滚动，注意设置固定高度：
<scroll-view scroll-y style="height: 500rpx;">
<view v-for="item in list" :key="item.id">{{item.text}}</view>
</scroll-view>定位规范
绝对定位需考虑导航栏高度。获取系统状态栏高度可通过uni.getSystemInfoSync()：
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;字体与图标
字体建议使用系统默认或网络字体（需各平台兼容）。图标推荐使用<uni-icons>组件或字体图标库（如Iconfont），避免图片图标带来的体积问题。
<uni-icons type="contact" size="30"></uni-icons>多端调试技巧
使用Chrome开发者工具模拟不同设备尺寸，配合uni.upx2px()API实时转换rpx到px值。真机调试时注意iOS和Android的渲染差异。
以上规范结合Flexbox布局的灵活性和uniapp的多端适配能力，可构建高兼容性的跨端界面。实际开发中建议通过uni.scss管理全局样式变量，保持样式一致性。
