vue移动端rem适配

// public/js/rem.js
function remSize() {
  // 获取屏幕宽度
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth
  if(deviceWidth>=750) {
    deviceWidth = 750
  }
  if(deviceWidth<=320) {
    deviceWidth = 320
  }
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
  document.querySelector('body').style.fontSize = 0.3 + 'rem'
  // 设计稿是750px
  // 设置1半的宽度,那么就是375px
  // 1rem == 100px的设计稿宽度
  // 表达一半的宽度就是3.75rem
}

remSize()
// 当窗口发生变化是调用该函数
window.onresize = function() {
  remSize()
}

// public/index.html
<script src="<%= BASE_URL %>js/rem.js"></script>
上一篇:移动端适配


下一篇:移动端使用rem适配手机端 (阿里js文件)