uniapp 官方样式
Uniapp 官方样式规范
Uniapp 提供了一套默认的样式规范，旨在统一多端开发体验。这些样式基于微信小程序的 WXSS 规范，并扩展支持其他平台。
基础样式
Uniapp 内置的基础样式包括：
- 默认字体：
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue" - 默认字号：
14px - 默认行高：
1.4 - 默认颜色：
#333333
这些基础样式会自动应用到所有页面，开发者可以通过修改 app.vue 中的全局样式进行覆盖。
单位系统
Uniapp 使用 rpx 作为响应式单位：
1rpx等于屏幕宽度的 1/750- 设计稿通常按照 750rpx 宽度进行设计
- 换算公式：
px = rpx * (屏幕宽度 / 750)
对于需要固定尺寸的场景，可以使用 px 单位。
颜色系统
官方推荐的配色方案：
- 主色：
#007AFF（蓝色） - 成功色：
#4CD964（绿色） - 警告色：
#FF9500（橙色） - 错误色：
#FF3B30（红色） - 文字色：
#333333（主文字），#666666（常规文字），#999999（次要文字） - 背景色：
#F7F7F7（页面背景），#FFFFFF（组件背景）
组件默认样式
常见组件的默认样式值：
- 按钮：高度
92rpx，圆角6rpx，默认内边距0 32rpx - 输入框：高度
72rpx，默认边框1rpx solid #e5e5e5 - 列表项：高度
96rpx，左右边距32rpx - 标签栏：高度
100rpx，图标尺寸54rpx
全局样式变量
Uniapp 支持通过 CSS 变量定义全局样式：
:root {
--primary-color: #007AFF;
--success-color: #4CD964;
--warning-color: #FF9500;
--error-color: #FF3B30;
--text-color: #333333;
--border-color: #e5e5e5;
}样式重置
Uniapp 会对部分 HTML 元素进行样式重置：
box-sizing: border-box全局应用body元素默认边距清零a标签颜色继承父级img标签默认去除边框
多端适配建议
针对不同平台的样式适配：
- H5 端可使用
postcss进行自动转换 - 小程序端注意
rpx单位的兼容性 - APP 端可使用条件编译处理平台差异样式
最佳实践
推荐的样式编写方式：
- 使用 SCSS/LESS 预处理器管理样式
- 遵循 BEM 命名规范
- 提取公共样式到单独文件
- 避免使用过于复杂的选择器
- 合理使用 CSS 变量实现主题切换
以上规范可以帮助开发者保持应用样式的一致性和可维护性，同时确保在多端环境中获得良好的显示效果。
