REM单位与H5适配-CSDN博客

本文链接：https://blog.csdn.net/sunzr_17/article/details/113246789

本文介绍REM单位的概念及其与PX、EM的区别，并详细解释了如何利用REM单位实现H5页面的响应式布局，包括JavaScript动态调整根元素字体大小的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

「px」 相对长度单位，是相当于显示器的分辨率而言的 「em」 相对长度单位，相对父元素的字体大小而言的 「rem」 相对长度单位，相对html根元素的字体大小而言的，css3新增元素
区别：

IE无法调整那些使用px作为单位的字体大小，em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点与一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应，目前除了IE8及更早版本外，左右浏览器均以支持rem。
3.所以rem可以很好是适配h5

/* eslint-disable */
(function (designWidth, maxWidth) {
  var doc = document,
    win = window;
  var docEl = doc.documentElement;
  var tid;
  var rootItem, rootStyle;

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (!maxWidth) {
      maxWidth = 540;
    };
    if (width > maxWidth) {
      width = maxWidth;
    }
    //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
    var rem = width * 100 / designWidth;
    //兼容UC开始
    rootStyle = "html{font-size:" + rem + 'px !important}';
    rootItem = document.getElementById('rootsize') || document.createElement("style");
    if (!document.getElementById('rootsize')) {
      document.getElementsByTagName("head")[0].appendChild(rootItem);
      rootItem.id = 'rootsize';
    }
    if (rootItem.styleSheet) {
      rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
    } else {
      try {
        rootItem.innerHTML = rootStyle
      } catch (f) {
        rootItem.innerText = rootStyle
      }
    }
    //兼容UC结束
    docEl.style.fontSize = rem + "px";
  };
  refreshRem();

  win.addEventListener("resize", function () {
    clearTimeout(tid); //防止执行两次
    tid = setTimeout(refreshRem, 300);
  }, false);

  win.addEventListener("pageshow", function (e) {
    if (e.persisted) { // 浏览器后退的时候重新计算
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);
  if (doc.readyState === "complete") {

    doc.body.style.fontSize = "16px";
  } else {
    doc.addEventListener("DOMContentLoaded", function (e) {
      doc.body.style.fontSize = "16px";
    }, false);
  }
})(750, 1206);
//写上分辨率进行适配

px，em，rem区别

区别 ：

区别：