px、em、rem区别介绍 - 图2

PX

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

PX特点**

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

      EM

      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作为单位就行了。 所以我们在写CSS的时候，需要注意两点：

    1. body选择器中声明Font-size=62.5%；
    1. 将你的原来的px数值除以10，然后换上em作为单位；
    1. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

在总结rem之前先说一下，之前是怎么解决移动端布局的。

百分比布局

宽度还好说 屏幕宽度100%，各个板块按照计算的比例各种xx%但是高度就不行了没有参照物，图片还好说，背景图、字体大小就呵呵了。只能做到大概。

固宽320px

这种方案简单粗爆，以px为单位该是多少就是多少。但是当手机分辨率越高，两边留白越多 看着很不爽。

为什么选择rem布局。

就是因为可以解决以上问题。这么说是不是有点废话。。。
那就不费话了

首先rem相对于根(html)的font-size大小来计算。

例如:font-size:10px;,那么（1rem = 10px）了解计算原理后
首先解决怎么在不同设备上设置html的font-size大小。
在查看了很多相关rem文章和自己经验后。基本实现原理有两种

1、js 来获取设备宽度。

既然是移动端，我们可以开心的直接不考虑 微软家那几个老儿子
获取设备宽度 rectObject = object.getBoundingClientRect();
返回值是一个DOMRect对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。

  1. //这玩意看着高端又好使
  2. document.querySelector('.box').getBoundingClientRect();
  3. ClientRect {
  4.     bottom: 108
  5.     height: 100
  6.     left: 8
  7.     right: 68
  8.     top: 8
  9.     width: 60
  10. }

这样就能拿到设备的宽度 当然meta 先设置

  1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">

这样写的原因是为了设置设备的相对于px的宽度

  1. //chrome 模拟设备iphone5
  2. document.documentElement.getBoundingClientRect().width
  3. 320
  4. //chrome 模拟设备iphone6
  5. document.documentElement.getBoundingClientRect().width
  6. 375
  7. //chrome 模拟设备iphone6 plus
  8. document.documentElement.getBoundingClientRect().width
  9. 414

这样一来 我拿到了设备宽度，完了设置html的font-size大小
例如设计稿宽度640px，我现在做法是把设计稿纵向分成16份，那么每份是640/16=40px，40px = 1rem
换算成rem就是16rem就等于40*16=640 这样一来设计稿切图时，拿到每一部分的宽度就可以计算相对应的rem值，
例如拿到的宽度是100px 那么100/40=2.5rem 这样就可以按照设计稿的比例显示在设备上
下面我写了一个简单demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
  7.     <script type="text/javascript">
  8.     window.onload = function(){
  9.         (function() {
  10.             var docElem = document.documentElement;
  11.             docElem.style.fontSize = docElem.getBoundingClientRect().width / 16 + "px";
  12.         })()
  13.     };
  14.     </script>
  15. </head>
  16. <style media="screen">
  17.     * {
  18.         margin: 0;
  19.         padding: 0;
  20.     }
  21.     li {
  22.         width: 1rem;
  23.         height: 100%;
  24.         float: left;
  25.         list-style: none;
  26.         text-align: center;
  27.         color: #fff;
  28.     }
  29.     li:nth-child(1) {
  30.         background: red;
  31.     }
  32.     li:nth-child(2) {
  33.         background: blue;
  34.     }
  35.     li:nth-child(3) {
  36.         background: pink;
  37.     }
  38.     li:nth-child(4) {
  39.         background: yellow;
  40.     }
  41.     li:nth-child(5) {
  42.         background: black;
  43.     }
  44.     li:nth-child(6) {
  45.         background: red;
  46.     }
  47.     li:nth-child(7) {
  48.         background: blue;
  49.     }
  50.     li:nth-child(8) {
  51.         background: yellow;
  52.     }
  53.     li:nth-child(9) {
  54.         background: black;
  55.     }
  56.     li:nth-child(10) {
  57.         background: pink;
  58.     }
  59.     li:nth-child(11) {
  60.         background: red;
  61.     }
  62.     li:nth-child(12) {
  63.         background: blue;
  64.     }
  65.     li:nth-child(13) {
  66.         background: yellow;
  67.     }
  68.     li:nth-child(14) {
  69.         background: pink;
  70.     }
  71.     li:nth-child(15) {
  72.         background: black;
  73.     }
  74.     li:nth-child(16) {
  75.         background: red;
  76.     }
  77. </style>
  78. <body>
  79.     <ul>
  80.         <li>1</li>
  81.         <li>2</li>
  82.         <li>3</li>
  83.         <li>4</li>
  84.         <li>5</li>
  85.         <li>6</li>
  86.         <li>7</li>
  87.         <li>8</li>
  88.         <li>9</li>
  89.         <li>10</li>
  90.         <li>11</li>
  91.         <li>12</li>
  92.         <li>13</li>
  93.         <li>14</li>
  94.         <li>15</li>
  95.         <li>16</li>
  96.     </ul>
  97. </body>
  98. </html>

接下来我再推荐一个js，来源淘宝

  1. //我一直在用这个 绝对好用 还可以meta都不用写 js会判断如果没有则创建一个。
  2.     (function (win) {
  3.         var ratio, scaleValue, renderTime,
  4.                 document = window.document,
  5.                 docElem = document.documentElement,
  6.                 vpm = document.querySelector('meta[name="viewport"]');
  7.         if (vpm) {
  8.             var tempArray = vpm.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
  9.             if (tempArray) {
  10.                 scaleValue = parseFloat(tempArray[2]);
  11.                 ratio = parseInt(1 / scaleValue);
  12.             }
  13.         } else {
  14.             vpm = document.createElement("meta");
  15.             vpm.setAttribute("name", "viewport");
  16.             vpm.setAttribute("content", "width=device-width, initial-scale=1, user-scalable=no, minimal-ui");
  17.             docElem.firstElementChild.appendChild(vpm);
  18.         }
  19.         win.addEventListener("resize", function () {
  20.             clearTimeout(renderTime);
  21.             renderTime = setTimeout(initPage, 300);
  22.         }, false);
  23.         win.addEventListener("pageshow", function (e) {
  24.             e.persisted && (clearTimeout(renderTime), renderTime = setTimeout(initPage, 300));
  25.         }, false);
  26.         "complete" === document.readyState ? document.body.style.fontSize = 12 * ratio + "px" : document.addEventListener("DOMContentLoaded", function () {
  27.             document.body.style.fontSize = 12 * ratio + "px";
  28.         }, false);
  29.         initPage();
  30.         function initPage() {
  31.             var htmlWidth = docElem.getBoundingClientRect().width;
  32.             htmlWidth / ratio > 540 && (htmlWidth = 540 * ratio);
  33.             win.rem = htmlWidth / 16;
  34.             docElem.style.fontSize = win.rem + "px";
  35.         }
  36.     })(window);
  37.     //以上两种方法都行，还适用于雪碧图。同上的计算方法即可。当然也不是非得分成16份。可以是人一份，只不过计算时替换16就可以了。还有就是计算比较麻烦，不过你如果习惯sacss less css编译写法就很简单了 定义变量，引用直接/变量即可。

2、接下来再说一种媒体查询
  1. //我很喜欢这种方法，不过有一点比较麻烦就是得知道设备的宽度，手机的分辨率很多所以麻烦了点。不过性能方面肯定最高。
  2. @media screen and (min-width: 320px) {
  3.     html {
  4.         font-size: 50px;
  5.     }
  6. }
  7. @media screen and (min-width: 360px) {
  8.     html {
  9.         font-size: 56px;
  10.     }
  11. }
  12. @media screen and (min-width: 414px) {
  13.     html {
  14.         font-size: 63px;
  15.     }
  16. }

作者：我是一个前端
链接：https://www.jianshu.com/p/6994a7017dfa
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。