中止使用像素思惟去思考

本篇文章主要是记录开发过程当中使用rem的过程，包括字体大小和宽高如何设置。

先来一波官方解释

rem 的官方定义『The font size of the root element.』，能够简称root em，即以根节点的字体大小做为基准值进行长度计算。通常认为网页中的根节点是 html 元素，因此采用的方式也是经过设置 html 元素的 font-size 来作屏幕适配。

rem和px是如何计算，相互转换的

首先这个并无一个固定的换算，由于这个取决于本身的手写的js转换文件

最简单就是百倍换算，1rem=100px，那么上面所量取的rem就很明确了 41px=.41rem，40px=.4rem。

有人会问了，你这里怎么写了.41rem .4rem，你的0被你吃了，不该该是0.41rem 0.4rem吗？

别慌，并无被我吃了。是由于在谷歌的前端开发规范中当小于1的时候0能够省略不写。

你是否是记不记得 background：rgba(0，0，0，.5)，这个你再熟悉不过了吧。.5表示透明度，就写成了没有0的方式

这样每次量取了直接用px/100，就是所对应的rem的大小。

贴一下咱们项目的关于rem和px的转化文件。想要在项目中使用rem布局，直接复制下面这段代码就能够了

<script type="text/javascript">
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        clientWidth = (clientWidth > 375) ? 375 : clientWidth
        docEl.style.fontSize = clientWidth / 3.75 + 'px'
      }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    recalc()
  })(document, window)
</script>
复制代码

在实际项目使用过程当中，直接想上面的js复制到本身项目里面就行，就自动对应了1rem=100px

如何设置字体的rem

做为一个前端，咱们平时接触到的UI给咱们的PSD文件，咱们应该量取字体的大小呢，用来设置rem的单位。

下面是一个psd文件的设计稿：

第一种：根据宽来衡量

font-size: .41rem;
复制代码

第二种：根据高来衡量

font-size: .4rem;
复制代码

固然，若是在设计稿上面量出的宽和高分别是30和29，你设置.3rem和.29rem都是差很少的；可是假如宽和高是30和20，固然这是一种比较夸张的说法，咱们只是在说理论。那么是设置.3rem仍是.2rem呢？

若是宽和高想等的状况下，不管是经过宽仍是高来衡量，随便去一个值均可以实现字体的rem设置。

若是宽和高不想等呢？我是使用宽和高哪一个来做为最终的rem字体大小呢？

建议也是身边大多数朋友使用的宽来做为标准设置计算rem。

由于在拿到设计稿的时候，咱们设计稿的宽度通常都是固定的，使用宽来做为标准，字体大小就有一个固定的基准值来计算rem的大小；使用高的话，在不一样设备上面，高度也可能有变化，因此不推荐使用高来做为标准来计算。

margin和padding这些边距如何计算

这个就相对来讲简单了，直接量取px相应的px，而后除以100就好了。

好比

咱们就设置相应的margin/padding=.41rem就好了。

rem和vw vh我应该使用哪个？

在大屏幕上面显示效果下使用rem和vw vh 都是没有关系的。**可是到了特别小的屏幕上面，vw wh 就出现了问题，所有都被挤出了。**最多见的就是给一个table，来设置一个宽，你能够尝试使用rem和vw vh来分别布局一下，而后把浏览器窗口调的比较小就发现vw和vh很差使了。

何时使用rem？

虽然rem是针对移动端来设计出来的字体单位，可是一样适用于pc端。

因此我建议不管是pc端仍是移动端都适用rem来操做。即便如今大家项目如今没有移动端，只有pc端，万一后续有了呢？固然你可使用第三方插件来批量修改，可是仍是pc端和rem来进行操做。

页面中哪些元素须要使用rem

margin / padding /border /font-size/border-radius 都适用rem吗？

确定不是的。确定是须要的时候使用rem，os: 你这句话说了等于没说，辣鸡！

想一下，平时若是使用rem，咱们须要margin padding font-size border-radius 确定是须要根据页面的大小来动态设置。

可是border：.3rem solid red; 边框你要设置rem单位的话，就会很是丑陋。好比在超大屏幕上面，你的border变成了border：10px solid red；

你能够想象一下，这个屏幕上面忽然出现一个10px的线是怎样的体验。丑，丑的不行。因此border这个就建议使用px，其余的就使用rem来布局

补充

rem和px的转换也可使用下面的js.

这是rem布局的核心代码，这段代码的大意是： **若是页面的宽度超过了640px，那么页面中html的font-size恒为100px，不然，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640) **

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
复制代码