rem的实际应用

以下是一个企业微信落地页面，本页面使用了rem技术。
html
<!doctype html>
<html lang="zh-CN" style="font-size: calc(100vw / 400)">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs2@0.0.2/qrcode.min.js"></script>
    <style>
        :root {
            --one: 0.01rem
        }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            margin: 0 auto;
            padding-top: calc(80 * var(--one));
            max-width: 420px;
        }

        .user-logo {
            width: calc(54 * var(--one));
            height: calc(54 * var(--one));
            display: block;
            margin: 0 auto calc(20 * var(--one));
        }

        .contact-me {
            font-size: calc(16 * var(--one));
            color: #10141A;
            font-weight: 500;
            text-align: center;
            padding-bottom: calc(33 * var(--one));
        }

        .gray-box {
            margin: 0 auto;
            background: rgba(5, 14, 26, 0.03);
            width: calc(310 * var(--one));
            border-radius: calc(12 * var(--one));
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;

            padding-top: calc(48 * var(--one));
            padding-bottom: calc(48 * var(--one));
        }

        .add-friend {
            font-size: calc(16 * var(--one));
            font-weight: 500;
            color: #000;
            margin-bottom: calc(20 * var(--one));
        }

        .btn {
            background: #267ef0;
            border: #267ef0;
            color: #fff;
            height: calc(40 * var(--one));
            padding-left: calc(16 * var(--one));
            padding-right: calc(16 * var(--one));
            min-width: calc(160 * var(--one));
            border-radius: calc(5 * var(--one));
            font-size: calc(14 * var(--one));
            display: block;
            margin: calc(48 * var(--one)) auto;
        }

        #qrcode img {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="box">
    <img class="user-logo" alt="" src="https://wwcdn.weixin.qq.com/node/wework/images/qrcode_logo.7d1af620e9.png"/>
    <div class="contact-me">
        <span style="color: #999">“</span>
        <span>添加我的企业微信与我联系吧</span>
        <span style="color: #999">”</span>
    </div>
    <div class="gray-box">
        <div class="add-friend">手机微信扫码添加好友</div>
        <div style="width: calc(200 * var(--one));height: calc(200 * var(--one));position: relative">
            <div id="qrcode"></div>
        </div>
    </div>

    <button id="btn" class="btn" type="button">
        打开微信进行添加
    </button>
</div>
<script>
  function start(wxUrl){
    new QRCode(document.getElementById("qrcode"), {
      text: wxUrl,
      width: 200,
      height: 200,
      colorDark: "#000",   // 企业微信绿
      colorLight: "#ffffff", // 白色背景
      correctLevel: QRCode.CorrectLevel.H, // 最高容错
    });

    document.getElementById('btn').addEventListener('click', () => {
      location.href = wxUrl;
    })
  }

  let wxUrl = '${workerUrl}';
  start(wxUrl)
</script>
<script>
  const initHtmlFontSize = () => {
    let deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
    if (deviceWidth > 400) {
      deviceWidth = 400
    }
    document.querySelector('html').style.fontSize = (deviceWidth / 4) + 'px'
  }
  initHtmlFontSize();
  window.addEventListener("resize", initHtmlFontSize);
</script>
</body>
</html>
rem的实际应用 ​

rem的实际应用
