移动端自适应解决方案

手机端页面自适应解决方案—rem布局

设计稿640
640px = 6.4rem
100px = 1rem
10px = 0.1rem
1px = 0.01rem

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    designSize = 640

  var recalc = function () {
    var clientWidth = docEl.clientWidth,
      clientHeight = docEl.clientHeight;
    if (!clientWidth) return;
    if (clientWidth >= designSize) {
      docEl.style.fontSize = (designSize / 10) + (clientWidth / clientHeight * 10) + 'px'
    } else {
      docEl.style.fontSize = 100 * (clientWidth / designSize) + 'px';
    }
  }

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

用rem来做响应式开发

DEMO

10px = 1rem 在根元素（font-size = 10px的时候）

20px = 1rem 在根元素（font-size = 20px的时候）

40px = 1rem 在根元素（font-size = 40px的时候）

html {
  font-size: 62.5% /* 10÷16=62.5% */
}

@media only screen and (min-width:481px) {
  html {
    font-size: 94%!important /* 15.04÷16=94% */
  }
}

@media only screen and (min-width:561px) {
  html {
    font-size: 109%!important /* 17.44÷16=109% */
  }
}

@media only screen and (min-width:641px) {
  html {
    font-size: 125%!important /* 20÷16=125% */
  }

  body {
    max-width: 640px
  }
}

body {
  font-size:12px;
  font-size:1.2rem ; /* 12÷10=1.2 */
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  background-color: #ddd;
  min-width: 320px;
  margin: 0 auto;
  position: relative
}

使用Flexible实现手淘H5页面的终端适配

• 资料文献
• Github
• DEMO

@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;
    }
}