纯css使用rem布局以及js处理

纯css布局

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

//下面媒体查询用在pc端响应式
@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处理

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






//配合响应式处理 大于600或小于300不在响应式
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()
}

视口单位换算

/* 定义基准 750或640 等等 */
$vw_fontsize: 75;
rem = ($px / 2 / $vw_fontsize) * 1rem;