移动端布局屏幕适配方案

　　在移动端开发过程中，我们需要适配各种不同机型的屏幕，如何能够写一套代码适，做到屏幕的完美适配呢。针对设计稿为750*1334，自己常用的适配方案如下:

• 方案一

  • (function(doc, win){
          var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
              recalc = function(){
                  var clientWidth = docEl.clientWidth;
                  if(!clientWidth) return;
                  docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
              };
    
          if(!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    对应的css

    .wrapper{
      　　padding: .2rem .3rem;//对应750的设计稿40px/60px
    }

• 方案二

  　var dpr, rem, scale;
    var docEl = document.documentElement;
    var fontEl = document.createElement('style');
    var metaEl = document.querySelector('meta[name="viewport"]');
    dpr = window.devicePixelRatio || 1;
    scale = 1 / dpr;
    rem = docEl.clientWidth * dpr / 10;
    metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
    docEl.setAttribute('data-dpr', dpr);
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

• 方案三

• @media (min- 320px){ // iphone4-5 >=375的设备
      html, body{
          font-size: 42.7px;
      }
  }
  @media (min- 340px){ // 主流设备
      html, body{
          font-size: 45.3px;
      }
  }
  @media (min- 360px){ // 主流设备
      html, body{
          font-size: 48px;
      }
  }
  @media (min- 375px){ // iphone6 >=375的设备
      html, body{
          font-size: 50px;
      }
  }
  @media (min- 400px){ // 主流设备
      html, body{
          font-size: 53.3px;
      }
  }
  @media (min- 414px){ // iphone6+ >=414的设备
      html, body{
          font-size: 55.2px;
      }
  }
  @media (min- 768px){ // >=768的设备
      html, body{
          font-size: 102.4px;
      }
  }
  @media (min- 992px){ // >=992的设备
      html, body{
          font-size: 132.7px;
      }
  }
  @media (min- 1200px){ // >=1200的设备
      html, body{
          font-size: 160px;
      }
  }
  body{
      font-size: .24rem; 
  }
  
  
  .wrapper{
        padding: .1rem .15rem;//对应750的设计稿10px/15px
      }