px、em和rem实战经验

2024年5月29日 139次阅读 来源: RRRookieG

前言

在自适应布局或者移动端网页开发时，我们经常会用到em和rem两个长度单位。接下来我们讨论一下这两个单位和px之间的区别，以及他们的使用场景等。

区别

px

px，像素(计算机屏幕上的一个点)。（
引自w3school-css单位）

像素（Pixels），相对长度单位，它是相对于显示器屏幕分辨率而言的，它兼容性好而且精确，但是这种方法当用户在缩放浏览器或者需要兼容不同移动设备时，我们的页面布局可能会被打破。

em

em为了解决上述问题而进化产生，也是相对长度单位，根据使用它的元素的大小决定（有人误以为是根据父元素，那是因为使用它的元素继承了父类的属性，根据W3C标准可知 ，它们是基于当前对象元素的字体大小），它可以自动适应用户所使用的字体。

em，相对长度单位。相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。（
引自em-CSS3参考手册）

关于em值的计算

假设任意浏览器的默认字体大小都是16px。所有未经调整的浏览器中都是1em=16px。为了方便换算，我们通常在css中设置body的属性 font-size:62.5%，这就使1em值变为10px,这样我们就可以把设计稿的px值除以10，然后换上em作为单位来进行px和em的换算，十分简单，例如16px可以改写为1.6em。

rem

由于em值不是固定的，1em在不同元素下的值会因为该元素或者该元素父元素的大小不同而不同，因此在我们多次使用时，就会带来开发的难度。这时候rem(root em)应运而生了。rem是相对于根(html)元素，这就意味着，我们只需要根据自己的需要给根元素确定一个参考值，然后通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。最大的优点是提供一致尺寸，便于计算。

rem，相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。（
引自rem-CSS3参考手册）

根元素重写

em 和 rem 单位之间的区别是浏览器根据谁来转化成px值,em是基于当前对象内文本的字体尺寸决定，rem是基于html元素的字体大小来决定，而根(html)元素的字体大小如果没有显式地设置固定值去覆盖，那么它首先来自浏览器设置，因此浏览器的字体大小设置可以影响每个使用rem单元以及每个通过em单位继承的值。为了还原设计稿和实现合理的布局所以需要根元素重写。浏览器缩放动态修改根元素大小可以参考以下代码段。

<script>
    var timer, style = document.head.appendChild(document.createElement("style"));
    var useREM = window.useREM = Object.create({
      resize: function () {
        var config=this.config;
        this.size=Math.max(config.min, Math.min(config.max, document.documentElement.clientWidth)) / config.num;
        style.innerHTML="html{font-size: "+ this.size +"px !important;}"
        return this;
      },
      set: function (newConfig) {
        if(newConfig){
          for (var a in newConfig){
            if(this.config.hasOwnProperty(a)){
              this.config[a]=newConfig[a];
            }
          }
        }
        this.resize();
        return this;
      }
    }, {
      size: {
        value: 20,
        writable: true,
        configurable: false,
        enumerable: true
      },
      config: {
        value:{
          max: 1200,//设置最大可视区宽
          min: 900,//设置最小可视区宽
          num: 10,//根据需求调整比例
          delay: 100
        },
        writable: false,
        configurable: false,
        enumerable: true
      }
    });

    addEventListener("resize", function () {
      clearTimeout(timer);
      timer = setTimeout(this.resize.bind(this), this.config.delay);
    }.bind(useREM));

    useREM.set();
    </script>

同时，也有人认为这种做法在一定程度上剥夺了用户对浏览器字体设置的权利，他们的观点是rem的好处是给了我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小，无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。这个就暂不做讨论吧，日后有机会再讲。

使用场景

  • 如果这个属性根据它的font-size进行测量，则使用em，其他的使用rem
  • 媒体查询中使用 rem 单位
  • 不要在多列布局中使用 em 或 rem -改用 %

关于em和rem在完成模块化组件中的应用实例，你可以参考这篇文章。

兼容

  • 所有浏览器都支持px，除了IE8及以下版本，其它的浏览器都支持em和rem属性。对于不支持它的浏览器，就多写一个绝对单位的声明。
  • IE9/IE10在用于伪元素时或者使用字体简写声明时不支持rem
  • IOS Safari5.0-5.1虽然支持rem，但是在使用媒体查询时不支持rem

工具

在这里为大家提供一个px，em，rem单位转换工具。地址：http://pxtoem.com/

讨论区

  • csdn移动端和pc端两套代码，两种字号大小声明，pc端用了px，没有根据浏览器缩放自适应，移动端用了rem，根据屏幕宽度重写了根元素，实现了自适应。
  • 掘金主页用了rem，在mac的chrome中根元素固定12px，但是文字大小有根据浏览器缩放实现自适应。
  • 你们团队是怎么做的？
    原文作者：RRRookieG
    原文地址: https://segmentfault.com/a/1190000015600933
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞