rem函数 简单实现记录

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script>
  (function (doc, win, image_width) {
      
      

    var docEl = doc.documentElement, //获取html标签
      //orientationchange方向改变事件
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
      
      
        //当前设备视口宽度
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / image_width) + 'px';
      };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);

  })(document, window, 750);

</script>
<style>
  .name {
      
      
    font-size: 0.32rem;
  }
</style>

<body>
  <div class="name">lidaxuan- 李大玄</div>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/weixin_43553701/article/details/130206158
rem