uniapp 通用样式
全局样式设置
在App.vue中定义全局样式，所有页面共享：
/* App.vue */
<style>
/* 通用字体和背景 */
page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: #f5f5f5;
line-height: 1.5;
}
/* 通用边距重置 */
view, text, image {
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>常用工具类样式
在common/uni.css中定义复用样式类：
/* flex布局 */
.flex-row {
display: flex;
flex-direction: row;
}
.flex-col {
display: flex;
flex-direction: column;
}
.align-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
/* 间距 */
.mt-10 { margin-top: 10rpx; }
.mb-20 { margin-bottom: 20rpx; }
.p-30 { padding: 30rpx; }
/* 文字 */
.text-bold { font-weight: bold; }
.text-center { text-align: center; }
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 颜色 */
.bg-primary { background-color: #007AFF; }
.text-white { color: #FFFFFF; }页面样式规范
建议采用以下结构保持一致性：
/* 页面容器 */
.page-container {
padding: 20rpx;
}
/* 卡片样式 */
.card {
background: #FFFFFF;
border-radius: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
margin-bottom: 20rpx;
}
/* 按钮样式 */
.uni-btn {
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
font-size: 32rpx;
}响应式适配方案
使用rpx单位自动适配不同屏幕：
/* 字体大小适配 */
.font-24 { font-size: 24rpx; }
.font-32 { font-size: 32rpx; }
/* 固定宽度元素 */
.fixed-width {
width: 750rpx; /* 设计稿基准宽度 */
}
/* 图片自适应 */
.auto-image {
width: 100%;
height: auto;
}注意事项
- 多端差异需通过条件编译处理：
/* #ifdef H5 */ .h5-specific-style { padding: 10px; } /* #endif */ - 避免使用
!important，优先通过层级覆盖 - 复杂动画建议使用
animation代替CSS3变换
