自适应布局要素

1. 宽高百分比，不要固定死;
2. 弹性盒flex css3;
3. 单位（em、rem）px;
4. 媒体查询 - 利器 @media switch 960-1200;
5. gtid布局 - 网格布局;
6. view port - 手机布局利器;
7. 框架布局 - bootstrap、amazeUI、pure 等等几百种;

rem 原理

字体单位：值根据html根元素大小而定，同样可以作为宽度，高度等单位。
适配原理：将px替换成rem，动态修改html的fonts-size适配。
兼容醒：ios6以上和android 2.1以上，基本覆盖所有流行的手机系统。

em

根据父元素字体大小的倍数设置。

css3自适应布局单位vw、vh

视口单位(Viewport units)
什么是视口？
在PC端，视口指的是在PC端，指的是浏览器的可视区域；
而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
根据CSS3规范，视口单位主要包括以下4个：
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

下面是工作中用到的移动端rem布局

// 一倍图
//兼容UC竖屏转横屏出现的BUG
//自定义设计稿的宽度：designWidth
//最大宽度:maxWidth
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
  var doc = document,
      win = window,
      docEl = doc.documentElement,
      remStyle = document.createElement("style"),
      tid;

  function refreshRem() {
      var width = docEl.getBoundingClientRect().width;
      maxWidth = maxWidth || 540;
      width>maxWidth && (width=maxWidth);
      var rem = width * 100 / designWidth;
      remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
  }

  if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(remStyle);
  } else {
      var wrap = doc.createElement("div");
      wrap.appendChild(remStyle);
      doc.write(wrap.innerHTML);
      wrap = null;
  }
  //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
  refreshRem();

  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 = "16px";
  } else {
      doc.addEventListener("DOMContentLoaded", function(e) {
      doc.body.style.fontSize = "16px";
      }, false);
  }
  })(750, 750);

// 二倍图
;(function(designWidth, maxWidth) {
  var doc = document,
      win = window,
      docEl = doc.documentElement,
      remStyle = document.createElement("style"),
      tid;

  function refreshRem() {
      var width = docEl.getBoundingClientRect().width;
      maxWidth = maxWidth || 540;
      width>maxWidth && (width=maxWidth);
      var rem = width * 100 / designWidth;
      remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
  }

  if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(remStyle);
  } else {
      var wrap = doc.createElement("div");
      wrap.appendChild(remStyle);
      doc.write(wrap.innerHTML);
      wrap = null;
  }
  //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
  refreshRem();

  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 = "16px";
  } else {
      doc.addEventListener("DOMContentLoaded", function(e) {
      doc.body.style.fontSize = "16px";
      }, false);
  }
  })(375, 750);

rem_pc

!function(doc, win) {
  var cw = 1920
  function fontSizeInit() {
    var html = doc.documentElement;
    var hwidth = html.getBoundingClientRect().width;
    hwidth < 768 && (hwidth = 768);
    html.style.fontSize = 100*(hwidth/cw) + 'px'
  }
  fontSizeInit();
  var reTimeoutId;
  win.onresize = function () {
    reTimeoutId && clearTimeout(reTimeoutId);
    reTimeoutId = setTimeout(function(){
      fontSizeInit();
    }, 100)
  };
}(document, window);