px、em、rem 的区别介绍

前言

之前对这三个字体大小单位只有一个模糊的印象，px 是像素大小，相对固定，适用于 PC 端；em 和 rem 是相对大小，适用于不同尺寸规格的移动端。最近改移动端页面，发现自己定义的 rem 大小与设计图相差甚远。蓝湖设计图上标注的是 px，而我使用的是 rem。而且因为最小字体设置为 12 px，有些时候看到的字体效果并不是实际展示大小。每次自己去用眼睛去评估大小是否合适，没有一个切实可行的解决方法。

[notice]Chrome 浏览器修改最小字号：选择浏览器右侧菜单栏 -> 设置 -> 找到自定义字体项 -> 按住滑块向左滑动，调整字体到 9 或者更小字号。[/notice]

px、em、rem 的区别

PX

px 像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

特点：

• 1. IE 无法调整那些使用 px 作为单位的字体大小；
• 2. 国外的大部分网站能够调整的原因在于其使用了em 或 rem 作为字体单位；
• 3. Firefox 能够调整 px 和 em，rem，但是 96% 以上的中国网民使用 IE 浏览器(或内核)。

EM

em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

特点：

• 1. em 的值并不是固定的；
• 2. em 会继承父级元素的字体大小。

[notice]注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。[/notice]

REM

rem 是 CSS3 新增的一个相对单位（root em，根 em）。rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。

参考：px、em、rem区别介绍

px 转换为 rem

了解了 px、em、rem 的区别之后，就会知道一般移动端为什么会推荐使用 rem 了。它具备了 em 的相对大小特性，又可以全局定义字体大小，不会出现 em 的嵌套计算字体大小的情况。

那么以 px 为单位的设计图如何转化为实际标注的 rem 值呢？这个要跟 UI 进行确认，一般移动端设计图是实际 px 两倍大小。然后根据 html 元素设置的 font-size 值计算 rem。比如 html 元素 font-size 为 10px，一个 div 字体实际大小为 12 px，那么就可以标注为 1.2 rem。一次类推，如果 html 元素 font-size 为 20px，那么这个 div 就应该标注为 0.6rem。

html(px)	10	16(default)	20
div(rem)	10/10=1	10/16=0.625	10/20=0.5
div(rem)	12/10=1.2	12/16=0.75	12/20=0.6
div(rem)	14/10=1.4	14/16=0.875	14/20=0.7
div(rem)	16/10=1.6	16/16=0.1	16/20=0.8
div(rem)	18/10=1.8	18/16=1.125	18/20=0.9
div(rem)	20/10=2	20/16=1.125	20/20=1