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