前言

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

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

px、em、rem 的区别

PX

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

特点:

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

EM

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

特点:

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

注意:任意浏览器的默认字体高都是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作为单位就行了。

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)1016(default)20
div(rem)10/10=110/16=0.62510/20=0.5
div(rem)12/10=1.212/16=0.7512/20=0.6
div(rem)14/10=1.414/16=0.87514/20=0.7
div(rem)16/10=1.616/16=0.116/20=0.8
div(rem)18/10=1.818/16=1.12518/20=0.9
div(rem)20/10=220/16=1.12520/20=1