px 与 rem 单位转换
常用取值:16(浏览器默认)、100(1rem=100px 便于心算)、37.5(750 设计稿 /20)
px
⇄
rem
常用尺寸对照(点击复制)
| px | rem |
|---|
整段 CSS 批量转换
关于 rem
rem相对根元素(html)的字号计算,em相对父元素字号——这是两者最大的区别,做整站缩放要用 rem。- 移动端常见做法:按设计稿宽度动态设置
html的font-size(如 750 设计稿设为屏宽/10,即 1rem = 75px),页面元素全部用 rem,即可等比缩放。 - 1px 边框建议保留 px。换算成 rem 后在部分设备上会被渲染成 0.9px 甚至消失,所以默认勾选了「忽略 1px」。
- 根字号设成 100 时换算最直观(
100px = 1rem),但要注意它会影响所有以 rem 为单位的默认样式。 - 全部换算在浏览器本地完成。相关:Web 尺寸规范、屏幕 PPI 计算、CSS 格式化。