rem适配方案

<!DOCTYPE html>
<html style="height: 100%;width: 100%;">
<head>
  <meta charset="utf-8">
  <!-- <meta name="referrer" content="no-referrer" /> -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>标题</title>
  <script>
  // 适配
     var _mtac = {};
    (function (doc, win) {
      var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
              recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 这边代表设计尺寸是750
                if (clientWidth >= 750) {
                  docEl.style.fontSize = '100px';
                } else {
                 // 这边代表设计尺寸是750
                  docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
              };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    // document.body.addEventListener('touchmove touchstart', function (e) {
    //     e.preventDefault();
    //   }, {passive: false}); 禁止微信浏览器下滑
  </script>
  <style type="text/css">
    #APP_Loading {
      top:50%;
      left:50%;
      position: absolute;
      -webkit-transform: translateY(-50%)  translateX(-50%);
      transform: translateY(-50%)  translateX(-50%);
      z-index:100;
    }
    @-webkit-keyframes ball-beat {
      50% {
        opacity: 0.2;
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
      }
      100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes ball-beat {
      50% {
        opacity: 0.2;
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
      }

      100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    .APP_ball-beat > div {
      background-color: #3080e1;
      width: 15px;
      height: 15px;
      border-radius: 100% !important;
      margin: 2px;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      display: inline-block;
      -webkit-animation: ball-beat 0.7s 0s infinite linear;
      animation: ball-beat 0.7s 0s infinite linear;
    }
    .APP_ball-beat > div:nth-child(2n-1) {
      -webkit-animation-delay: 0.35s !important;
      animation-delay: 0.35s !important;
    }
  </style>
</head>
<body>
<div id="app"></div>
<div id="APP_Loading">
  <div class="loader-inner APP_ball-beat">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
</body>
</html>

2.使用方式
100px = 1rem
10px = 0.1rem
例如: 设计稿尺寸是750px, div的尺寸是320px,那么rem换算就是3.2rem
设计稿尺寸是325px, div的尺寸是160px,那么rem换算就是3.2rem

你可能感兴趣的:(css3,javascript,css)