5.1 WXSS是什么？
WXSS（WeiXin Style Sheets）是微信小程序的样式语言，类似于网页开发中的CSS。
WXSS vs CSS
| 对比 | CSS | WXSS |
|---|---|---|
| 选择器 | 支持完整选择器 | 支持大部分选择器 |
| 单位 | px, em, rem | rpx, px |
| 布局 | flex, grid | 主要用flex |
最大的区别：WXSS新增了rpx单位，专为适配不同屏幕尺寸设计。
5.2 rpx尺寸单位
rpx（responsive pixel）是微信小程序推出的响应式单位。
工作原理
- 设计师通常以 iPhone 6 为基准设计（宽度750px）
1rpx = 0.5px（在iPhone 6上）- 换算规则：750rpx = 屏幕宽度
换算对照表
| 设备 | 屏幕宽度 | 1rpx = ? px |
|---|---|---|
| iPhone 5 | 320px | 0.5px |
| iPhone 6 | 375px | 0.5px |
| iPhone X | 414px | 0.552px |
| iPad | 768px | 1px |
使用建议
配图位置：
images/ch05/ch05_01_rpx_rule.png
- 标注：750rpx = 屏幕宽度
什么时候用 rpx？
- 容器宽度、间距、字体大小等大部分场景
- 保持比例缩放
什么时候用 px？
- 边框宽度（通常1px）
- 非常精细的微调
/* 建议使用 rpx */.container{width:750rpx;/* 满屏宽度 */padding:20rpx;/* 内边距 */font-size:28rpx;/* 字体大小 */}/* 通常使用 px */.separator{height:1px;/* 边框用px */}5.3 选择器
WXSS支持的选择器：
常用选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
.class | .container | 类选择器 |
#id | #username | ID选择器（不推荐） |
element | view | 标签选择器 |
element,element | view,text | 多元素选择器 |
.parent .child | .card .title | 后代选择器 |
.parent > .child | .list > .item | 子选择器 |
选择器优先级
同CSS，优先级由高到低：
!important > 行内样式 > #id > .class > element示例
/* 标签选择器 */view{box-sizing:border-box;}/* 类选择器 */.container{padding:20rpx;}/* 后代选择器 */.card .title{font-size:32rpx;font-weight:bold;}/* 多元素选择 */page, view, text{font-family:-apple-system;}5.4 Flex布局
Flex（弹性盒模型）是WXSS中最常用的布局方式。
基本概念
┌─────────────────────────────────────┐ │ flex container │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │item1│ │item2│ │item3│ │ │ └─────┘ └─────┘ └─────┘ │ └─────────────────────────────────────┘display: flex- 开启弹性布局flex-direction- 主轴方向justify-content- 主轴对齐align-items- 交叉轴对齐
常用属性
1. flex-direction - 主轴方向
.container{display:flex;flex-direction:row;/* 水平（默认） *//* flex-direction: column; 垂直 */}2. justify-content - 主轴对齐
.container{display:flex;justify-content:flex-start;/* 左对齐（默认） *//* justify-content: center; 居中 *//* justify-content: flex-end; 右对齐 *//* justify-content: space-between; 两端对齐 *//* justify-content: space-around; 等距分布 */}3. align-items - 交叉轴对齐
.container{display:flex;align-items:stretch;/* 拉伸（默认） *//* align-items: flex-start; 顶部对齐 *//* align-items: center; 居中对齐 *//* align-items: flex-end; 底部对齐 */}4. flex-wrap - 换行
.container{display:flex;flex-wrap:nowrap;/* 不换行（默认） *//* flex-wrap: wrap; 换行 */}5. flex - 份数分配
.box{flex:1;/* 平分剩余空间 */}.golden{flex:2;/* 占2份 */}.silver{flex:1;/* 占1份 */}/* golden 和 silver 的比例是 2:1 */5.5 实战：居中布局
水平垂直居中
.center-box{display:flex;justify-content:center;/* 水平居中 */align-items:center;/* 垂直居中 */}### 底部固定按钮 ```css .fixed-bottom{position:fixed;bottom:0;left:0;right:0;padding:20rpx 30rpx;}5.6 常用样式属性
文本样式
.text{font-size:28rpx;/* 字体大小 */color:#333333;/* 文字颜色 */font-weight:bold;/* 字体粗细 */text-align:center;/* 文本对齐 */line-height:1.5;/* 行高 */}背景与边框
.box{background-color:#ffffff;/* 背景色 */border-radius:16rpx;/* 圆角 */border:1rpx solid #e0e0e0;/* 边框 */}内边距与外边距
.box{padding:20rpx;/* 内边距（四周） */padding:20rpx 30rpx;/* 上下20rpx，左右30rpx */padding-top:20rpx;/* 单边设置 */margin:20rpx;/* 外边距（四周） */}
- 标注：padding 和 margin 的区别
盒模型
┌─────────────────────────┐ │ margin │ │ ┌───────────────────┐ │ │ │ border │ │ │ │ ┌─────────────┐ │ │ │ │ │ padding │ │ │ │ │ │ ┌───────┐ │ │ │ │ │ │ │content│ │ │ │ │ │ │ └───────┘ │ │ │ │ │ └─────────────┘ │ │ │ └───────────────────┘ │ └─────────────────────────┘/* 设置盒模型为 border-box */*{box-sizing:border-box;}5.7 全局样式与局部样式
app.wxss - 全局样式
在app.wxss中定义的样式，所有页面都生效：
/* app.wxss */page{background-color:#f5f5f5;/* 所有页面背景色 */font-size:28rpx;/* 所有页面字体大小 */}页面样式 - index.wxss
在单个页面的.wxss文件中定义的样式，只对该页面生效：
/* pages/index/index.wxss */.container{padding:20rpx;}样式覆盖
如果页面样式和全局样式冲突，页面样式会覆盖全局样式。
5.8 实战：短信生成器样式
/* pages/index/index.wxss *//* 页面容器 */.container{min-height:100vh;background-color:#f5f5f5;padding:20rpx;}/* 卡片 */.card{background-color:#ffffff;border-radius:16rpx;padding:30rpx;margin-bottom:20rpx;}/* 类型标签容器 */.type-tabs{display:flex;flex-wrap:wrap;}/* 类型标签 */.type-tab{flex:1;min-width:45%;padding:20rpx;margin:10rpx;border-radius:12rpx;border:2rpx solid #e0e0e0;text-align:center;}.type-tab.active{border-color:#1890ff;background-color:#e6f7ff;}/* 输入框 */.input-field{width:100%;padding:20rpx;border:1rpx solid #d9d9d9;border-radius:8rpx;font-size:28rpx;}.input-field-placeholder{color:#bfbfbf;}/* 主按钮 */.btn-primary{width:100%;height:88rpx;background-color:#1890ff;color:#ffffff;border-radius:44rpx;font-size:32rpx;display:flex;align-items:center;justify-content:center;}`` > - 标注：各样式效果预览 --- ## 5.9 本章小结 ✅ 理解了WXSS与CSS的区别 ✅ 掌握了rpx响应式单位的使用 ✅ 学会了5种常用选择器 ✅ 掌握了Flex布局的6个核心属性 ✅ 理解了全局样式与局部样式的区别
