CSS单位：px、em、rem

时间 2019-12-12

标签 css 单位 rem 栏目 CSS 繁體版

原文原文链接

px

在平时的工做当中，我发现本身大多数时候是用px来做为CSS字体单位的，不只如此，其实公司的全部前端项目都是以px做为CSS字体单位的。咱们知道px（像素）做为CSS相对长度单位是相对于显示器的分辨率而言的。它的特色是稳定、精确、浏览器兼容性好，可是对应的，在Web页面中使用px做为字体的单位时也有它的问题，好比当用户试图调整浏览器的默认字体大小时，因为px是固定大小的，因此再怎么调整对应页面上字体的大小都是不会变的。html

em

因而为了解决上面提到的px做为字体单位的相似问题，又引入了一个新的CSS字体单位em，em做为字体单位也是一个相对长度单位，它相对于当前对象内文本的字体大小，若当前对象内文本的字体大小未被设置，则采用浏览器默认的字体大小。前端

任意浏览器的默认字体大小都是16px，因此在浏览器字体大小保持默认的状态下：1em = 16px，那么1px = 1 / 16 = 0.0625em，10px = 0.625em，同理12px = 0.0625 x 12 = 0.75em，14px = 0.0625 x 14 = 0.875em。浏览器

可是若是每次都要去进行对应的px值到em值得计算的话，想必会大大下降开发效率，为了简化px到em的值转换，能够在CSS中声明body的字体大小为62.5%，即body {font-size: 62.5%}，这样一来，1em = 16px * 62.5% = 10px，那么对应的12px = 1.2em，14px = 1.4em，这样换算起来就简单的多了。测试

可是像上面这样仍是有一个问题，就是em做为字体单位是会继承父元素字体大小的，上面的计算是假设全部元素的字体大小都以body的字体大小做为继承基准，然而实际的状况每每都不是这样的。举一个例子，以下DOM结构：字体

<body style="font-size:62.5%">
    <ul>
        <li style="font-size:1.2em">
            <a href="#" style="font-size:1.2em">导航菜单1</a>
            <span style="font-size:1em">我是一段测试文字</span>
        </li>
    </ul>
</body>

在默认状况下，咱们指望<a>标签下面的字体大小应该为1.2em也就是12px，<span>标签下面的字体大小为1em也就是10px，但实际像上面这样咱们获得的最终结果是<a>标签下面的字体大小为1.2 x 1.2 = 1.44em = 14.4px，<span>标签下面的字体大小为1.2 x 1 = 1.2em = 12px，这个就是由于em做为字体单位会继承父元素的字体大小，在本例中，因为给父元素<li>设置了字体大小为1.2em，因此浏览器在计算<a>标签和<span>标签的字体大小时就是上面实际所获得的结果。spa

这样一来其实em真正的计算公式就是：1 ➗ 当前父元素的font-size x 须要转换的像素值 = em值，就不是单纯地每次都去除以16px了，显然这种继承的方式在开发时会带来极大的不便。code

rem

为了解决上面提到的em字体大小继承问题，又诞生出了一个新的CSS字体大小单位：rem，即 “root em”，它在字体大小与px进行换算时与em有着一样的换算规则，但惟一不一样的是，rem只会以根元素的字体大小做为换算基准，而不会每次都从本身当前的父元素那里继承，在Web页面中根元素就是<html>，它的字体大小就是浏览器当前所设置的字体大小，默认状况下就是16px。htm

这样一来，按照上面提到的转换规则，仍是上面的例子，把<body style="font-size:62.5%">赋值给<html>，即<html style="font-size:62.5%">，全部的单位改为rem，就能够获得咱们的指望结果：<a>标签下面的字体大小应该为1.2rem也就是12px，<span>标签下面的字体大小为1rem也就是10px（此处只讲述原理，假设忽略浏览器的最小字体大小限制）。对象

rem很好地解决了em的字体大小从父元素继承所带来的不便。继承

浏览器兼容性

rem是CSS 3当中引入的单位，支持的浏览器有：Mozilla Firefox 3.6+、Apple Safari 5.0+、Google Chrome、IE9+和Opera11+，在现代浏览器或移动端，咱们能够放心地使用rem来做为字体大小单位，可是若是你想使用rem这个单位，又想兼容低版本的IE浏览器，能够考虑px和rem同时使用，用px兼容低版本IE的效果，用rem实现现代浏览器的效果。