转载 css html

利用CSS rem元素实现网站自适应

归2022-07-232024-01-14

前言

什么是 rem

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
除了 IE8 及更早版本外，所有浏览器均已支持 rem。
——来自百度

用途

利用 rem，我们就可以实现 js 自适应效果，可以很好的提升网页的多端效果，实现响应式布局

额外

定义 rem 基准值（rem 与 px 之间的换算关系）
rem 的计算公式：设备视口宽度 / 设计稿宽度 * 100

使用方法

加入以下 js 代码

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      var clientWidth = docEl.clientWidth;

      if (!clientWidth) return;

      if (clientWidth >= 750) {
        docEl.style.fontSize = "100px";
      } else {
        docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
      }
    };

  if (!doc.addEventListener) return;

  win.addEventListener(resizeEvt, recalc, false);

  doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

代码说明

1rem 就相当于一个根元素 font-size 的大小，加入以上代码在 css 直接用 1.5rem 即可

在 css 里规定

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />

    <title></title>
  </head>

  <style type="text/css">
    html {
      //在根元素中计算基准值字体大小，设备宽度 / 设计稿宽度 * 100

      font-size: calc(100vw / 375 * 100);
    }

    body {
      font-size: 16px;
    }

    //使用媒体查询监测设备视口宽度，当视口宽度大于最大移动设备宽度时，将内容的大小设置为固定值，不再随设备视口大小进行变化

    @media only screen and (min-width: 769px) {
      html {
        //将根元素字体大小设置为需求最大宽度的基准值大小

        font-size: calc(769px / 375 * 100);
      }

      body {
        //将内容宽度固定设置为需求最大宽度

        width: 769px;

        margin: auto;
      }
    }

    #box {
      width: 1rem;

      height: 1rem;

      background-color: aqua;

      font-size: 0.16rem;
    }
  </style>

  <body>
    <div id="box">测试rem</div>
  </body>
</html>