响应式布局

em：根据其父元素font-size进行计算

rem：根据根元素（html)的font-size进行计算

vm：根据可视化区域宽度和高度最小的计算，1vm=1%width||1%height

vw：根据可视化区域宽度计算，1vm=1%width

vh：根据可视化区域高度计算，1vm=1%height

js设置方法

function getRem() {
    var html = document.getElementsByTagName("html")[0];
    var userWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = 16 * (userWidth / 750) + "px";
}
window.onload = function() {
    getRem();
    window.addEventListener("resize", getRem, false);
};

 媒体查询方法

@media screen and (max-width:600px) {
      html {
        font-size: 10px;
      }
    }

    @media screen and (min-width:601px) and (max-width:900px) {
      html {
        font-size: 30px;
      }

    }

    @media screen and (min-width:901px) and (max-width:1200px) {

      html {
        font-size: 50px;
      }

    }