响应式字体的实现(rem方案)

57 阅读1分钟

响应式字体的实现(rem方案)

function remSize() {
  //获取设备宽度
  var devWidth = document.documentElement.clientWidth || window.innerWidth;
  if (devWidth >= 750) devWidth = 750;
  if (devWidth <= 320) devWidth = 320;
  //设置rem 750px-->1rem == 100px,375px-->1rem == 50px
  document.documentElement.style.fontSize = devWidth / 7.5 + "px";
  //设置字体大小
  document.querySelector("body").style.fontSize = 0.3 + "rem";
}
remSize()
window.onresize = function () {
    remSize()
};