CSS px ↔ rem 转换器
在 CSS 单位 px 和 rem 之间进行转换。
CSS 单位转换器
将像素 (px) 转换为 rem 单位。
CSS 单位说明
px（像素）
代表屏幕上一个像素的绝对单位。具有固定大小，在响应式设计中有限制。
rem（根元素 EM）
基于根元素（html）字体大小的相对单位。对可访问性和响应式设计有益。
转换公式
px → rem：px ÷ 基础字体大小
rem → px：rem × 基础字体大小
使用建议
- • 字体大小：建议使用 rem
- • 间距（margin、padding）：建议使用 rem
- • 边框：可使用 px
- • 媒体查询：建议使用 rem
常用转换值
px
rem
8px
0.5rem
12px
0.75rem
14px
0.875rem
16px
1rem
18px
1.125rem
20px
1.25rem
24px
1.5rem
32px
2rem
完整 CSS 单位指南
在网页开发中选择正确的 CSS 单位对用户体验和可访问性有很大影响。学习 px 和 rem 之间的差异以及如何在合适的情况下使用它们。
像素 (px) 单位深度指南
📐 特点
- • 与屏幕像素 1:1 对应的绝对单位
- • 所有浏览器中大小一致
- • 可实现精确布局控制
- • 不受用户设置影响
✅ 推荐用例
- • 边框粗细 (1px, 2px)
- • 阴影偏移
- • 图标大小 (16px, 24px)
- • 精细间距调整
⚠️ 注意事项
- • 忽略用户字体大小设置
- • 可能导致可访问性问题
- • 响应式设计受限
rem 单位深度指南
📐 特点
- • 基于根元素 (HTML) 字体大小
- • 反映用户设置
- • 保持一致的比例
- • 对可访问性友好
✅ 推荐用例
- • 字体大小设置
- • 间距 (margin, padding)
- • 容器大小
- • 媒体查询断点
💡 优点
- • 缩放时保持比例
- • 提高可访问性
- • 易于维护
实际应用指南
🎯 单位特定使用策略
排版
字体大小和行间距使用 rem rem
布局
间距和容器使用 rem rem
细节
边框和阴影使用 px px
📱 响应式设计技巧
移动优先方法
将基础字体大小设置为 16px，并使用 rem 单位进行缩放
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }媒体查询使用
使用基于 rem 的断点保持一致性
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ 可访问性考虑
✅ 推荐做法
- • 使用 rem 单位设置字体大小
- • 保持 16px 最小字体大小
- • 充足的行间距（1.5 或更大）
- • 最小触摸目标 44px
❌ 应避免的做法
- • 字体大小使用固定 px 值
- • 12px 以下的小文本
- • 固定容器宽度
- • 行间距 1.0 或更小
🔧 浏览器支持和兼容性
px 单位
所有浏览器完美支持。从 IE6+ 开始可用。
rem 单位
IE9+ 和现代浏览器完美支持。IE8 及以下需要回退。
IE8 支持： 先声明 px 值，然后添加 rem 值作为回退
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */