rem讲解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>rem</title>
    <script>
      (function(doc, win) {
        var docEl = doc.documentElement, //根元素html
          //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
          resizeEvt =
            "orientationchange" in window ? "orientationchange" : "resize",
          recalc = function() {
            console.log(2222);
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
            docEl.style.fontSize = 16 * (clientWidth / 375) + "px";
          };
        //alert(docEl)
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
        doc.addEventListener("DOMContentLoaded", recalc, false); //绑定浏览器缩放与加载时间
      })(document, window);
    </script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      html {
        /* Iphone6,7,8 */
        /* rem是基于 根元素 html 的font-size大小的 */
        /* font-size: 16px; */
      }
      div {
        /* 防止超过设备宽度 */
        max-width: 100vw;
        /* width: 300px; */
        /*  300 / 16 rem */
        width: 18.75rem;
        height: 5rem;
        /* 500 / 16 */
        /* width: 31.25rem;  
        height: 500px; */
        background-color: hotpink;
      }
    </style>
  </head>
  <body>
    <div>hello</div>
  </body>
</html>
效果图
rem讲解

webxEJIr

引用和评论

css之position: fixed;不相对网页定位
