以下是关于 WXSS（WeiXin Style Sheets） 的开发指南，帮助您更好地理解和使用微信小程序的样式语言。WXSS 基于 CSS，但针对小程序进行了适配和扩展，主要解决移动端屏幕适配问题。
一、WXSS 基础
- 与 CSS 的差异
O 尺寸单位：WXSS 引入了 rpx（Responsive Pixel），可根据屏幕宽度自适应。
- 设计稿建议以 750rpx 为基准（1:1 对应 iPhone6 的物理像素 375pt * 2）。
- 换算公式：1rpx = 屏幕宽度 / 750。
O 样式导入：通过 @import "path/to/style.wxss"; 导入外部样式文件。
O 全局与局部样式：
- app.wxss 为全局样式，作用于所有页面。
- 页面内的 .wxss 文件为局部样式，仅作用于当前页面。
- 选择器
O 支持常用 CSS 选择器，如类选择器 .class、ID 选择器 #id、标签选择器 view 等。
O 不支持 的部分高级选择器（如伪类 :hover、:before、:after 等，但部分组件内置了类似效果）。
二、核心特性
1. rpx 适配
- 使用 rpx 替代 px，避免手动计算不同屏幕的缩放比例。
- 示例：
css
.container {
width: 750rpx; /* 在 iPhone6 下等于 375px */
padding: 20rpx;
}
2. 样式隔离
- 默认情况下，小程序的页面样式相互隔离（组件样式默认隔离更强）。
- 可通过配置修改隔离行为：
json
// 组件的 .json 文件中
{
"styleIsolation": "shared" // 允许页面样式影响组件
}
3. 动态样式
- 通过数据绑定实现动态样式：
html
<view style="color: {{textColor}}; font-size: {{fontSize}}rpx">动态样式</view>
html
<view class="{{isActive ? 'active' : 'inactive'}}">条件样式</view>
三、布局技巧
1. Flex 布局
- 微信小程序推荐使用 Flex 布局实现响应式排版。
- 示例：
css
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
2. 适配不同屏幕
- 使用 rpx 配合媒体查询（Media Query）：
css
/* 在宽度小于 480px 的屏幕上调整样式 */
@media screen and (max-width: 480px) {
.title {
font-size: 28rpx;
}
}
3. 图片适配
- 设置图片宽高为百分比或 rpx，避免固定像素导致变形：
css
.image {
width: 100%;
height: auto;
}
四、最佳实践
- 避免样式冲突
O 使用命名空间（如 .page-index__container）减少全局样式污染。
O 优先使用类选择器而非标签选择器。
- 性能优化
O 减少不必要的嵌套层级。
O 避免使用 margin: 0 auto;（优先 Flex 或 Grid 布局）。
- 复用样式
O 将公共样式（如颜色、字体）定义在 app.wxss 中：
css
:root {
--primary-color: #007aff;
}
.text-primary {
color: var(--primary-color);
}
五、常见问题
- 样式不生效
O 检查选择器优先级是否被覆盖。
O 确认样式文件路径是否正确，是否被局部样式覆盖。
- rpx 计算错误
O 确保设计稿宽度为 750rpx，直接按 1:1 转换设计稿标注值。
- 组件样式隔离
O 若组件样式无法修改，检查是否开启了 styleIsolation 配置。
通过合理使用 WXSS，您可以高效实现微信小程序的界面适配与美化。建议结合微信开发者工具的实时预览功能调试样式，并参考官方文档获取最新特性支持。