響應式佈局

方法一：js動態控制html根節點font-size
請儘早加載一下代碼

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
var doc = document.documentElement;
window.addEventListener(evt, _resize, false);
window.addEventListener("DOMContentLoaded", _resize);
function _resize(){
   doc.style.fontSize = 20*(doc.clientWidth / 1200) + "px";  
}//根據ui圖紙或自己的需求可自行修改 20,1200 這兩個值

方法二 ：css媒體查詢

@media screen and (max-width: 1200px){//屏幕寬度小於1200px
  html{
    font-size: 20px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1600px){//屏幕寬度1200~1600
  html{
    font-size: 30px;
  }
}
@media screen and (min-width: 1600px){//屏幕寬度大於1600px
  html{
    font-size: 40px;
  }
}