純css布局

html {
  font-size: calc(100vw / 7.5);
}

//下面媒體查詢用在pc端響應(yīng)式
@media screen and (min-width: 600px) {
  html {
    font-size: calc(600px / 7.5);
  }
}

@media screen and (max-width: 300px) {
  html {
    font-size: calc(300px / 7.5);
  }
}

js處理

//移動(dòng)端處理
function responseAdjust(width = 750) {
  var htmlDom = document.documentElement
  htmlDom.style.fontSize = htmlDom.clientWidth / width * 100 + "px"
}
responseAdjust()
window.onresize = function() {
  return responseAdjust()
}






//配合響應(yīng)式處理 大于600或小于300不在響應(yīng)式
function responseAdjust(width = 750, minWidth = 300, maxWidth = 450) {
  var htmlDom = document.documentElement
  var clientWidth = htmlDom.clientWidth
  if(clientWidth > maxWidth) {
    clientWidth = maxWidth
  }
  if(clientWidth < minWidth) {
    clientWidth = minWidth
  }
  htmlDom.style.fontSize = clientWidth / width * 100 + "px"
}
responseAdjust()
window.onresize = function() {
  return responseAdjust()
}

視口單位換算

/* 定義基準(zhǔn) 750或640 等等 */
$vw_fontsize: 75;
rem = ($px / 2 / $vw_fontsize) * 1rem;