第四章 WXSS 样式系统与布局
📚 系列教程：微信小程序投票系统完整开发
🔗 上一章：第三章 - WXML 表单组件全览
🔗 下一章：第五章 - JS 生命周期、事件与 API 全览
4.1 WXSS 简介与 CSS 的区别
WXSS（WeiXin Style Sheets）是小程序的样式语言，基于 CSS 扩展：
| 对比 | CSS | WXSS |
|---|---|---|
| 尺寸单位 | px / rem / vw | rpx（自适应） |
| 选择器 | 支持*属性选择器等 | 不支持*和属性选择器 |
| 全局变量 | CSS Variables | 部分支持，谨慎使用 |
| 导入 | @import | @import（同样支持） |
| 本地字体 | @font-face | 不支持本地字体文件 |
4.2 rpx 单位深度理解
rpx 以750rpx = 屏幕宽度为基准，自动适配所有设备。
各设备换算关系
| 设备 | 屏幕宽度 | 1rpx 对应 px |
|---|---|---|
| iPhone SE | 320px | 0.427px |
| iPhone 6/7/8 | 375px | 0.5px（设计基准） |
| iPhone 12 | 390px | 0.52px |
| iPhone 14 Plus | 428px | 0.571px |
| 常见 Android | 360px | 0.48px |
设计稿换算规则
设计稿输出宽度：750px 换算规则：设计稿 1px = 小程序 1rpx（1:1 直接使用） 示例： 设计稿卡片宽度 = 702px → width: 702rpx 设计稿字号 = 28px → font-size: 28rpx 设计稿圆角 = 16px → border-radius: 16rpx 设计稿间距 = 24px → padding: 24rpx最佳实践
/* 尺寸、间距、圆角 → rpx */ .card { padding: 30rpx; border-radius: 16rpx; margin: 20rpx 24rpx; } /* 字体大小 → rpx */ .title { font-size: 36rpx; font-weight: bold; } .body { font-size: 28rpx; } .small { font-size: 24rpx; } .tiny { font-size: 22rpx; } /* 1px 细线用 1rpx（2x屏显示为0.5物理像素）*/ .border { border-bottom: 1rpx solid #eee; }4.3 Flex 布局（小程序主流布局）
小程序中几乎所有布局都用 Flex 实现，必须熟练掌握。
核心属性速查
/* ===== 父容器属性 ===== */ /* 主轴方向 */ flex-direction: row; /* 横向（默认）*/ flex-direction: column; /* 纵向 */ /* 主轴对齐（水平方向，row时）*/ justify-content: flex-start; /* 左对齐（默认）*/ justify-content: center; /* 居中 */ justify-content: flex-end; /* 右对齐 */ justify-content: space-between;/* 两端对齐，中间均分 */ justify-content: space-around; /* 每项两侧等距 */ justify-content: space-evenly; /* 所有间距相等 */ /* 交叉轴对齐（垂直方向，row时）*/ align-items: stretch; /* 拉伸填满（默认）*/ align-items: center; /* 垂直居中 */ align-items: flex-start; /* 顶部对齐 */ align-items: flex-end; /* 底部对齐 */ /* 换行 */ flex-wrap: nowrap; /* 不换行（默认）*/ flex-wrap: wrap; /* 换行 */ /* ===== 子元素属性 ===== */ flex: 1; /* 占据所有剩余空间 */ flex: 2; /* 占据两倍剩余空间 */ flex-shrink: 0; /* 禁止压缩 */ align-self: center; /* 单独设置这个子元素的交叉轴对齐 */常用布局模式
/* 水平居中 */ .row-center { display: flex; justify-content: center; align-items: center; } /* 两端对齐 + 垂直居中（最常用）*/ .row-between { display: flex; justify-content: space-between; align-items: center; } /* 垂直列表 */ .col { display: flex; flex-direction: column; } /* 垂直列表 + 水平居中 */ .col-center { display: flex; flex-direction: column; align-items: center; } /* 左图右文（图片固定，文字占剩余）*/ .left-img-right-text { display: flex; align-items: center; } .left-img-right-text image { flex-shrink: 0; width: 80rpx; height: 80rpx; margin-right: 20rpx; } .left-img-right-text text { flex: 1; } /* 标签换行排列 */ .tags { display: flex; flex-wrap: wrap; gap: 12rpx; }4.4 定位布局
/* 相对定位 + 绝对定位（子绝父相）*/ .card { position: relative; } .badge { position: absolute; top: -8rpx; right: -8rpx; background: #f44336; color: #fff; font-size: 20rpx; padding: 4rpx 10rpx; border-radius: 20rpx; } /* 固定定位（底部操作栏）*/ .footer-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: #fff; padding: 20rpx 40rpx; /* iPhone X 安全区适配 */ padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.08); } /* sticky 吸顶（如 Tab 栏）*/ .tab-bar { position: sticky; top: 0; z-index: 10; background: #fff; }4.5 投票系统完整样式规范
全局配色系统
主色 #07C160 微信绿 主色深 #0a9e4d 主色浅 #e8f5e9 用于背景/标签 文字主 #222222 文字次 #666666 文字辅 #999999 文字占位 #cccccc 页面背景 #f5f7fa 卡片背景 #ffffff 输入框背景 #fafafa 边框正常 #e8e8e8 边框浅色 #f0f0f0通用卡片
.card { background: #fff; border-radius: 16rpx; margin: 20rpx 24rpx 0; padding: 30rpx; box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06); }通用按钮（清除小程序默认样式）
/* 主按钮 */ .btn-primary { background: linear-gradient(135deg, #07C160, #0a9e4d); color: #fff; border-radius: 50rpx; font-size: 32rpx; font-weight: bold; border: none; height: 88rpx; padding: 0; display: flex; align-items: center; justify-content: center; } .btn-primary::after { border: none; } /* 清除边框 */ /* 禁用态 */ button[disabled] { background: #ccc !important; color: #fff !important; opacity: 1 !important; } /* 次要按钮 */ .btn-default { background: #fff; color: #666; border: 2rpx solid #e0e0e0; border-radius: 50rpx; font-size: 32rpx; height: 88rpx; padding: 0; } .btn-default::after { border: none; }状态标签
.tag { display: inline-flex; align-items: center; padding: 6rpx 18rpx; border-radius: 20rpx; font-size: 22rpx; font-weight: 500; } .tag-green { background: #e8f5e9; color: #07C160; } .tag-blue { background: #e3f2fd; color: #1976d2; } .tag-orange { background: #fff3e0; color: #f57c00; } .tag-red { background: #ffebee; color: #f44336; }进度条
.progress-wrap { height: 16rpx; background: #f0f0f0; border-radius: 8rpx; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, #07C160, #52c41a); border-radius: 8rpx; transition: width 0.6s ease; }骨架屏动画
@keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .skeleton { background: #f0f0f0; border-radius: 8rpx; animation: shimmer 1.5s ease-in-out infinite; }空状态
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 100rpx 40rpx; } .empty-icon { font-size: 100rpx; margin-bottom: 24rpx; } .empty-title { font-size: 32rpx; color: #666; font-weight: bold; } .empty-desc { font-size: 26rpx; color: #999; margin-top: 12rpx; }4.6 常见样式坑速查表
| 问题 | 原因 | 解决方案 |
|---|---|---|
*选择器不生效 | WXSS 不支持通配符 | 改用page {}设置全局基础样式 |
| button 有默认边框 | 微信默认样式 | button::after { border: none; } |
| button disabled 颜色不对 | 权重问题 | 用!important覆盖 |
| image 底部有空隙 | 行内元素特性 | image { display: block; } |
| 文字单行截断 | - | overflow:hidden; text-overflow:ellipsis; white-space:nowrap; |
| 文字多行截断 | - | -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; overflow:hidden; |
| iOS 底部被遮挡 | 安全区问题 | padding-bottom: env(safe-area-inset-bottom) |
| 1px 边框太粗 | 设备像素比 | 改用1rpx（高清屏显示为0.5px） |
| transition 不生效 | 内联样式无法过渡 | 只对 class 中的属性做 transition，动态宽度用内联 style 配合 class transition |
本章小结
✅ 深入理解了 rpx 与设计稿换算（1:1 对应 750px 设计稿）
✅ 掌握了 Flex 布局所有常用属性和典型模式
✅ 学会了 fixed/absolute/sticky 定位的使用场景
✅ 建立了投票系统完整样式规范（颜色、按钮、卡片、进度条）
✅ 整理了常见样式坑和解决方案
下一章：JS 生命周期、事件系统和所有常用 wx API 全览。
章节：4 / 15 | 更新时间：2026-05-18
