停止使用像素思维去思考


本篇文章主要是记录开发过程中使用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布局，直接复制下面这段代码就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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文件的设计稿：

第一种：根据宽来衡量

1
font-size: .41rem;

第二种：根据高来衡量

1
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) **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    (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);