uniapp布局样式
uniapp布局样式基础
uniapp基于Vue.js框架，支持多种布局方式，包括Flex布局、Grid布局和传统盒模型布局。样式编写遵循CSS规范，同时支持rpx响应式单位。
Flex布局示例
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}rpx单位使用
.box {
width: 750rpx; /* 等于屏幕宽度 */
height: 300rpx;
margin: 20rpx;
}常用布局组件
uniapp提供内置组件简化布局开发：
view组件
<view class="flex-container">
<view class="item">1</view>
<view class="item">2</view>
</view>scroll-view组件
<scroll-view scroll-y style="height: 500rpx;">
<view v-for="item in 50" :key="item">内容{{item}}</view>
</scroll-view>响应式设计技巧
媒体查询
@media screen and (max-width: 750px) {
.responsive-box {
flex-direction: column;
}
}条件编译
/* #ifdef H5 */
.h5-specific {
padding: 20px;
}
/* #endif */样式作用域处理
使用scoped属性限定样式作用域：
<style scoped>
.local-style {
color: #007AFF;
}
</style>性能优化建议
避免过度使用复杂选择器 减少不必要的层级嵌套 合理使用CSS变量维护主题色：
:root {
--main-color: #4CD964;
}
.success {
background-color: var(--main-color);
}跨平台适配方案
通过uni.upx2px()进行单位转换
const pxValue = uni.upx2px(750);使用uni.getSystemInfoSync()获取设备信息
const systemInfo = uni.getSystemInfoSync();
const windowWidth = systemInfo.windowWidth;
