@media only screen and (max-width: 600px), only screen and (max-device-width:400px) {
  html,body {
    font-size:50px;
  }
}
@media only screen and (max-width: 500px), only screen and (max-device-width:400px) {
  html,body {
    font-size:40px;
  }
}
@media only screen and (max-width: 400px), only screen and (max-device-width:300px) {
  html,body {
    font-size:30px;
  }
}
.box{
  border: 1rem solid #000;
  font-size: 1rem;
}

// 需求：根據(jù)設(shè)計(jì)圖的比例去動(dòng)態(tài)設(shè)置不同屏幕下面對(duì)應(yīng)的font-size值
// 這段JS不要添加入口函數(shù)，并且引用的時(shí)候放到最前面
// ui的大小根據(jù)自己的需求去改
// 設(shè)計(jì)圖的寬度
var ui = 750;
// 自己設(shè)定的font值
var font = 40;
// 得到比例值
var ratio = ui/font;
var oHtml = document.documentElement;
var screenWidth = oHtml.offsetWidth;
// 初始的時(shí)候調(diào)用一次
getSize();
window.addEventListener('resize', getSize);
// 在resize的時(shí)候動(dòng)態(tài)設(shè)置fontsize值
function getSize(){
  screenWidth = oHtml.offsetWidth;
  // 限制區(qū)間
  if(screenWidth <= 320){
    screenWidth = 320;
  }else if(screenWidth >= ui){
    screenWidth = ui;
  }
  oHtml.style.fontSize = screenWidth/ratio + 'px';
}