CSS工具
编程开发
在线CSS代码格式化、压缩、优化、净化、混淆工具，支持语法验证、px转rem/rpx响应式单位转换，提升样式代码质量与加载性能
快捷样例点击加载示例代码
px 转 rem
px
px 转 rpx
750px
输入 CSS 代码
输出结果
已格式化
工具介绍
CSS 工具是一个在线样式代码处理平台，提供格式化、压缩、优化、净化、混淆等多种功能， 帮助开发者快速处理 CSS 代码，提升代码质量和页面加载性能。支持 px 转 rem/rpx 响应式单位批量转换。
使用场景
| 场景 | 说明 |
|---|---|
| 代码格式化 | 将压缩或混乱的 CSS 代码格式化为标准缩进格式，便于阅读和维护 |
| 生产环境压缩 | 移除空格、注释、换行，生成最小化 CSS 文件，减少加载时间 |
| 代码优化 | 自动简化 margin/padding 简写、颜色缩写、font-weight 关键字等 |
| 响应式单位转换 | 将 px 值批量转换为 rem（Web）或 rpx（微信小程序）响应式单位 |
| 代码保护 | 混淆类名和 ID 名称，防止他人轻易复制样式代码 |
| 语法检查 | 检查括号匹配和基本结构，快速定位 CSS 语法错误 |
优化规则说明
- margin/padding：4值相同→1值，上下/左右相同→2值
- border-radius：4角相同→1值，对角相同→2值
- font-weight：400→normal，700→bold
- 颜色值：#AABBCC→#ABC（可缩写的十六进制）
- 零值：0px/0em/0rem/0%→0（移除单位）
常见问题
格式化和净化有什么区别？
格式化会添加缩进和换行使代码美观可读；净化则去除注释和多余空白，每个规则独立一行，介于格式化和压缩之间。
压缩和净化的区别是什么？
压缩会移除所有空格、注释、换行，生成单行最小化代码；净化保留基本换行结构但去除注释和多余空白。
px 转 rem 的基准值怎么选？
通常使用 16px（浏览器默认），也可根据设计稿设置。rem = px / 基准值，如 32px / 16 = 2rem。
px 转 rpx 适用于哪些场景？
rpx 是微信小程序专用单位，750px 设计稿下 1px = 2rpx。选择对应设计稿宽度即可自动换算。
混淆后的代码如何还原？
混淆会重命名类名和 ID，需同步更新 HTML 中的引用。建议混淆前保留原始代码作为映射参考。
优化功能支持哪些属性简写？
支持 margin/padding 四值简写、border-radius 对角简写、font-weight 数字转关键字、颜色 #AABBCC 转 #ABC、零值去单位等。