从理解开始谈谈px rem 和 em 的区别与联系

概述

古语有云，没有规矩则不成方圆。秦灭六国之后为了促进国内生产力的发展，也是大力推进全国度量衡的统一。车同轨，书同文。与“尺寸”相关的问题（手动滑稽），从古至今一直为人们所关注。所以在我的处女文章中，也决定大体讲讲在前端领域里面的“尺寸”问题。

目前的国内的前端开发圈子中，最常使用到的关于“尺寸”的单位，应该是 px , rem , em 这三位。本文主要介绍这三种尺寸单位是怎么来的，能做什么，要怎么用。

px(逻辑像素)

在一般的计算机应用中，px表示像素点，即屏幕上每一个可发光的单元点，比如我们所说的1080p屏幕，那指的就是宽度达到1080px的屏幕，还有2k屏，4k屏，也是通过计算像素点的数量而得出的屏幕分类与称呼。从理论上来说，像素点是显示终端最小的可显示单位，小于1个像素的内容，是没有办法完美的显示在屏幕上。这也是为什么早期屏幕的画面容易出现锯齿的原因。

上面这一段所介绍的是硬件上的像素，一般我们称为“物理像素”。而在前端的长度单位里面的px的概念，与“物理像素”略有不同。浏览器在某些设备（如iphone系列）上，会将两个甚至更多的物理像素点合并为一个显示上的“点”去进行计算和渲染。这就涉及到另一个概念：“dpr”，这个在后面的文章会进一步深入介绍。而在浏览器上的一个“点”，我们称为“逻辑像素”，与“物理像素”概念相对应，也就是我们在css上所使用的 px 。

px单位的使用非常简单，比如我们需要一个宽度为300px,高度为100px的长方形div：

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <title>px单位长方形</title>

        <style>

            #test1{width:300px;height:100px;background:#bfa;}

        </style>

    </head>

    <body>

        <div id="test1"></div>

    </body>

</html>

使用px作为单位，对于pc端的开发来说具有较大的优势：

PC端的项目设计图的宽度和高度比例基本固定，而且屏幕相对较宽，使用px单位对于普通项目不会造成太多不友好的显示效果。
对于设计师与前端开发者对接而言，使用px单位能够降低单位转换的成本，提高开发速度。
px概念比较清晰，对于入门开发者而言使用门槛低，比较友好。

但如果是在移动端的开发上，px作为单位则显得有些力不从心了。

由于手机以及平板电脑等移动终端的普及，移动端的开发也已经占了前端开发的半壁江山。而移动端由于其设备终端分辨率尺寸的多样化，以及横竖屏切换导致宽高比差异较大等原因。使用固定的px作为尺寸单位就很容易出现字体、形状的过大或过小，对于用户浏览和使用网站来说造成困扰。而为了解决这一问题，w3c标准也从最初的px单位开始，衍生出了如 em ， rem ， vh ，vh 等一系列单位。而在中国国内，使用最为广泛的就是 rem 单位。但要说 rem 单位之前，我们首先要来说一说 em 这个单位。

em(父元素字体大小)

em 与 rem 只差了一个字母，他们的概念也是相近。理解了 em 就能更好的理解 rem 这个单位。

相传从3000多年前古埃及的纸草书中，发现了人前臂的图形。用人的前臂作为长度单位叫“腕尺”；10世纪英国国王埃德加，把他的拇指关节之间的长度定为“1寸”。这里的“腕尺”和“寸”，实际上是一种相对的单位，如果两个埃及法老，一个身高一米五不到，一个身高两米，那他们的“腕尺”长度肯定是不一样的。但毫无疑问的是，他们的子民都会跟随他们的法老使用同样的“腕尺”作为他们的长度量度单位。所以只要新法老一上任，全国子民的“腕尺”也会跟着改变。而em单位，在原理上与这一制度相当接近。

em 的定义是元素所属的父元素的字体大小。如果某个元素的字体大小(font-size)为20px，那么它里面的元素的 1em 换算过来也是20px。

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <title>em单位</title>

        <style>

            .content{  background: #bfa;  }

        </style>

    </head>

    <body>

        <div id="test1" style="font-size: 50px">

            <!-- test1的字体大小是50px，所以里面的content  实际宽度是150px；实际高度是50px-->

            <div class="content" style="width: 3em;height: 1em;"></div>

        </div>

        <br/><br/>

        <div id="test2"  style="font-size: 20px">

            <!-- test2的字体大小是20px，所以里面的content  实际宽度是60px；实际高度是20px-->

            <div class="content" style="width: 3em;height: 1em;"></div>

        </div>

    </body>

</html>

em的单位一般的使用场景为段前段后的空行，或是在按字号倍数设置行高（如word中常用的1.5倍/2倍行高等），另外，对于模块化的设计而言，采用em单位应该也是一个不错的方案（模块内的元素统一度量单位，编辑时只需修改模块字体大小一个参数）。

rem(根节点字体大小)

理解了 em 单位之后，rem 这个就比较好理解了。rem 里面的这个“r”代表的就是 root ，也就是根。rem所指的也是整个html文档的根节点(html)的字体大小。如果说 em 是一方诸侯，那 rem 那就是号令四海八荒的天子了。只要元素是在html文档中显示，无论其是否脱离文档流，是否有绝对定位、固定定位等影响，元素中的1rem都是html标签上所定义的font-size。

也正是rem的这一种唯一性，使其在移动端的开发中备受青睐。还在使用px的日子里，每适配一个屏幕，各个元素的尺寸大小全部要算一遍，心好累。自从使用了rem，屏幕大小有变化，那只要根节点(html)的字体大小一变，就如同皇上下的圣旨，八荒六合无不拜服，各个元素麻溜地就把自己的尺寸给跟着调整过来了，顺心！

在这里我分享一套rem适配方案，并补充一些自我的注释：

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <!-- viewport设置视口参数，宽度为设备宽度，缩放比例固定为1-->

        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, minimal-ui">

        <title>rem解决方案</title>

        <script>

            (function(win) {

                var doc = win.document;

                var html = doc.documentElement;

    //            基于640px方案的设计稿

    ////////////////////////////////////////////////////

    //            通用的做法是将设计稿中的100px换算为1rem

    //            因此，当我们已知设计稿的宽度baseWidth,还有屏幕的实际宽度clientWidth时，1rem对于屏幕的实际宽度为：

    //            html-font-size =  clientWidth / (baseWidth/100) px

    ///////////////////////////////////////////////////

                        var baseWidth = 640,

                        grids = baseWidth / 100,

                        resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',

                        recalc = function() {

    //                        默认尺寸为320px

                            var clientWidth = html.clientWidth || 320;

    //                        如果屏幕尺寸大于640，则按640宽度进行计算

                            if (clientWidth > 640) {

                                clientWidth = 640

                            }

                            html.style.fontSize = clientWidth / grids + 'px';

                            document.querySelector('.content').style.display = 'block';

                        };

                if (!doc.addEventListener) return;

                win.addEventListener(resizeEvt, recalc, false);

                doc.addEventListener('DOMContentLoaded', function() {

                    setTimeout(recalc)

                }, false);

            })(window);

        </script>

        <style>

            @media screen and (min-width: 641px) {

                /*当屏幕大小大于640px时，显示区域宽度为640px并水平居中*/

                .content {

                    width: 640px;

                    margin: auto;

                }

            }

            .content{background: #baf;}

            .rem_box{

                width: 3.2rem;

                background: #fba;

                font-size: 0.2rem;

                margin: auto;

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="rem_box">

                无论屏幕如何缩放，橙色区域的宽度永远是紫色区域宽度的一半，里面的字体大小也会随屏幕大小变化而同步变化（除非小于12px）

            </div>

        </div>

    </body>

</html>

rem的使用比较广泛而且成熟，包括像手机淘宝等网站项目，也是使用了rem作为其解决方案。目前现代浏览器对于rem的支持也是相当不错，下面是canIuse上提供的rem的兼容性查询结果。

本文到这里也就接近尾声了，px rem 和 em 这三个概念在前端的知识中理解起来不算困难，同样也不需要死记硬背。只要肯多写，多试，多练，相信不用多久，你也能熟练掌握这三种利器，并且运用到实际的开发过程中。