移動端網頁佈局適配rem方案小結

時間 2019-11-08

標籤移動網頁佈局適配 rem 方案小結欄目無線简体版

原文原文鏈接

前言

根據 W3C 規範中對 1rem 的定義：css

1rem 與等於根元素 font-size 的計算值。當明確規定根元素的 font-size 時，rem 單位以該屬性的初始值做參照。
這就意味着 1rem 等於 html 元素的字體大小（大部分瀏覽器根元素的字體大小爲16px）html

兼容性

ios：6.1系統以上都支持vue

android：2.1系統以上都支持android

大部分主流瀏覽器都支持，能夠安心的往下看了。ios

rem：（font size of the root element）web

意思就是根據網頁的根元素來設置字體大小，和em（font size of the element）的區別是，em是根據其父元素的字體大小來設置，而rem是根據網頁的跟元素（html）來設置字體大小的，舉一個簡單的例子，瀏覽器

如今大部分瀏覽器IE9+，Firefox、Chrome、Safari、Opera ，若是咱們不修改相關的字體配置，都是默認顯示font-size是16px，即app

html {
    font-size:16px;
}

那麼若是咱們想給一個P標籤設置12px的字體大小，那麼用rem來寫就是iphone

p {
    font-size: 0.75rem; //12÷16=0.75（rem）
}

使用rem這個字體單位進行適配，就是利用它做爲一個全局字體固定參照單位的特性。若是改變html元素的字體大小，rem的值也就跟着改變，對應的其餘使用rem的佈局尺寸，也會跟着改變，從而達到適配的目的，保證比例一致。 因此rem不只能夠適用於字體，一樣能夠用於width height margin這些樣式的單位。ide

rem適配具體實現方案：

設計稿尺寸寬度爲750px，若是設計稿是640px，下邊js會自動計算rem的值（好比rem:75px -> rem: 64px），具體的尺寸rem不用調整（例如 padding: 1.5rem，不用調整，這是一個比例大小），對應的元素大小px值會根據新的rem（好比rem: 64px, padding等於 1.5 * 64）改變，從而按照比例適配。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>rem適配</title>
    <script>;(function(win, lib) {
      var doc = win.document;
      var docEl = doc.documentElement;
      var metaEl = doc.querySelector('meta[name="viewport"]');
      var flexibleEl = doc.querySelector('meta[name="flexible"]');
      var dpr = 0;
      var scale = 0;
      var tid;
      var flexible = lib.flexible || (lib.flexible = {});
      
      if (metaEl) {
          console.warn('將根據已有的meta標籤來設置縮放比例');
          var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
          if (match) {
              scale = parseFloat(match[1]);
              dpr = parseInt(1 / scale);
          }
      } else if (flexibleEl) {
          var content = flexibleEl.getAttribute('content');
          if (content) {
              var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
              var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
              if (initialDpr) {
                  dpr = parseFloat(initialDpr[1]);
                  scale = parseFloat((1 / dpr).toFixed(2));    
              }
              if (maximumDpr) {
                  dpr = parseFloat(maximumDpr[1]);
                  scale = parseFloat((1 / dpr).toFixed(2));    
              }
          }
      }
  
      if (!dpr && !scale) {
          var isAndroid = win.navigator.appVersion.match(/android/gi);
          var isIPhone = win.navigator.appVersion.match(/iphone/gi);
          var devicePixelRatio = win.devicePixelRatio;
          if (isIPhone) {
              // iOS下，對於2和3的屏，用2倍的方案，其他的用1倍方案
              if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
                  dpr = 3;
              } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                  dpr = 2;
              } else {
                  dpr = 1;
              }
          } else {
              // 其餘設備下，仍舊使用1倍的方案
              dpr = 1;
          }
          scale = 1 / dpr;
      }
  
      docEl.setAttribute('data-dpr', dpr);
      if (!metaEl) {
          metaEl = doc.createElement('meta');
          metaEl.setAttribute('name', 'viewport');
          metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
          if (docEl.firstElementChild) {
              docEl.firstElementChild.appendChild(metaEl);
          } else {
              var wrap = doc.createElement('div');
              wrap.appendChild(metaEl);
              doc.write(wrap.innerHTML);
          }
      }
  
      function refreshRem(){
          var width = docEl.getBoundingClientRect().width;
          if (width / dpr > 540) {
              width = 540 * dpr;
          }
          var rem = width / 10;
          docEl.style.fontSize = rem + 'px';
          flexible.rem = win.rem = rem;
      }
  
      win.addEventListener('resize', function() {
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
      }, false);
      win.addEventListener('pageshow', function(e) {
          if (e.persisted) {
              clearTimeout(tid);
              tid = setTimeout(refreshRem, 300);
          }
      }, false);
  
      if (doc.readyState === 'complete') {
          doc.body.style.fontSize = 12 * dpr + 'px';
      } else {
          doc.addEventListener('DOMContentLoaded', function(e) {
              doc.body.style.fontSize = 12 * dpr + 'px';
          }, false);
      }
      
  
      refreshRem();
  
      flexible.dpr = win.dpr = dpr;
      flexible.refreshRem = refreshRem;
      flexible.rem2px = function(d) {
          var val = parseFloat(d) * this.rem;
          if (typeof d === 'string' && d.match(/rem$/)) {
              val += 'px';
          }
          return val;
      }
      flexible.px2rem = function(d) {
          var val = parseFloat(d) / this.rem;
          if (typeof d === 'string' && d.match(/px$/)) {
              val += 'rem';
          }
          return val;
      }
  
  })(window, window['lib'] || (window['lib'] = {}));</script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but rem適配 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

helper.scss

$remBase: 75;
$primaryColor: #ffd633;

@function px2rem($px) {
  @return ($px / $remBase) * 1rem;
}

%textOverflow {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// @include borderLineTop('top', color)
@mixin borderLine($mode: 'top', $color: #e5e5e5) {
  position: relative;
  @if $mode == 'top' {
    &::before {
      // 實現1物理像素的下邊框線
      content: '';
      position: absolute;
      z-index: 1;
      pointer-events: none;
      background-color: $color;
      height: 1px;
      left: 0;
      right: 0;
      top: 0;
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin: 50% 0%;
      }
    }
  }
  @if $mode == 'bottom' {
    &::after {
      // 實現1物理像素的下邊框線
      content: '';
      position: absolute;
      z-index: 1;
      pointer-events: none;
      background-color: $color;
      height: 1px;
      left: 0;
      right: 0;
      bottom: 0;
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin: 50% 0%;
      }
    }
  }
}

@mixin borderRadius($radius) {
  border-top-left-radius: px2rem($radius);
  border-top-right-radius: px2rem($radius);
  border-bottom-left-radius: px2rem($radius);
  border-bottom-right-radius: px2rem($radius);
}

// @include banner(100)
@mixin banner($height) {
  position: relative;
  padding-top: percentage($height/750); // 使用padding-top
  height: 0;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
  }
}

$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 100);

$sides: (top, bottom, left, right);
@each $space in $spaceamounts {
  @each $side in $sides {
    .m-#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{px2rem($space)} !important;
    }
    .p-#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{px2rem($space)} !important;
    }
  }
}

.flex-center {
  display: flex;
  align-items: center;
}

@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
      font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
      font-size: $font-size * 3;
  }
}

App.vue, 使用px2rem進行轉換

<style lang="scss">
@import "@/assets/style/helper.scss";

#nav {
  padding: px2rem(24);
  a {
    font-size: px2rem(24);
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>