这个换算器是做什么用的
这个工具把像素(px)数值换算成 rem 和 em,也能反过来把 rem 或 em 换算成 px。无论是要把设计稿里固定的 px 尺寸换成响应式布局常用的 rem、em,还是想确认根字号变了以后 rem 的结果会怎么变,或者要按某个元素自身的字号算出准确的 em 值,你都可以直接在页面上输入数值查看结果。
三个可以互相换算的数值
页面上"数值"这一栏下有 px、rem、em 三个输入框,你在其中任意一个里输入数值,另外两个会随你输入即时更新。也就是说不管从哪个单位入手都可以,不用自己先换算好再填。
根字号(px)如何决定 rem 结果
"根字号(px)"默认是 16px,初始状态下 16px 等于 1rem,也等于 1em。把根字号改成和你项目 CSS 里一致的数值,所有 rem 换算结果都会跟着重新计算。根字号必须是大于 0 的数字,如果输入不满足这个条件,页面会提示"根字号必须是大于 0 的数字。"
em 上下文字号如何决定 em 结果
"em 上下文字号(px)"默认同样是 16px。之所以要单独设置,是因为 em 是相对于它所在元素的字号计算的,不是相对于根字号。把这一栏改成对应元素的实际字号,em 的换算结果才会准确。这个数值同样必须大于 0,否则页面会提示"em 上下文字号必须是大于 0 的数字。"
负数与输入校验
"数值"这一栏允许输入负的 px 数值。如果这一栏输入的内容不是有效数字,页面会提示"请输入一个数字来换算。"
常用 px → rem 对照表
页面下方有一张"常用 px → rem(16px 根字号)"表格,把常见的像素值按照 16px 根字号换算成对应的 rem 数值,不用一个个手动输入也能直接查到常见尺寸对应的结果。
数据处理方式
所有换算都在你的浏览器里完成,输入内容不会上传到 BroBroGo。
常见问题
px、rem 和 em 有什么区别?
px 是固定长度;rem 相对于页面的根字号,根字号为 16px 时 1rem 就是 16px;em 相对于所在元素的字号。用 rem 来定字号和间距,读者调大默认字号时整体也会跟着放大。
为什么要单独设 em 上下文字号?
em 相对于它所在元素的字号,而这个字号未必等于根字号。把 em 上下文设成那个元素的实际字号,换算才准确;两者一致时保持和根字号相同即可。
根字号不是 16px 怎么办?
把根字号那一栏改成和你 CSS 里一致,所有 rem 数值都会立刻更新。下面的小表针对大多数网站默认的 16px 根字号,方便随手查。