第四章 WXSS 样式系统与布局

第四章 WXSS 样式系统与布局 系列教程微信小程序投票系统完整开发 上一章第三章 - WXML 表单组件全览 下一章第五章 - JS 生命周期、事件与 API 全览4.1 WXSS 简介与 CSS 的区别WXSSWeiXin Style Sheets是小程序的样式语言基于 CSS 扩展对比CSSWXSS尺寸单位px / rem / vwrpx自适应选择器支持*属性选择器等不支持*和属性选择器全局变量CSS Variables部分支持谨慎使用导入importimport同样支持本地字体font-face不支持本地字体文件4.2 rpx 单位深度理解rpx 以750rpx 屏幕宽度为基准自动适配所有设备。各设备换算关系设备屏幕宽度1rpx 对应 pxiPhone SE320px0.427pxiPhone 6/7/8375px0.5px设计基准iPhone 12390px0.52pxiPhone 14 Plus428px0.571px常见 Android360px0.48px设计稿换算规则设计稿输出宽度750px 换算规则设计稿 1px 小程序 1rpx1: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 细线用 1rpx2x屏显示为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.5pxtransition 不生效内联样式无法过渡只对 class 中的属性做 transition动态宽度用内联 style 配合 class transition本章小结✅ 深入理解了 rpx 与设计稿换算1:1 对应 750px 设计稿✅ 掌握了 Flex 布局所有常用属性和典型模式✅ 学会了 fixed/absolute/sticky 定位的使用场景✅ 建立了投票系统完整样式规范颜色、按钮、卡片、进度条✅ 整理了常见样式坑和解决方案下一章JS 生命周期、事件系统和所有常用 wx API 全览。章节4 / 15 | 更新时间2026-05-18