根据屏幕尺寸设置html根字号fontSize大小并刷新-Toy模板网

这篇具有很好参考价值的文章主要介绍了根据屏幕尺寸设置html根字号fontSize大小并刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<script>
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  console.log(document.documentElement.clientWidth);
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'

  // 设置fontSize 后就可以使用rem实现适配
  if (document.documentElement.clientWidth === 3840) {
    document.documentElement.style.fontSize = '24px'
  }
}

// 初始化
setRem()

// 改变窗口大小时重新设置 rem
window.onresize = function () {
  history.go(0);
  setRem()
}

</script>

<template>
  <div id="app">
    <!-- <KeepAlive> -->
    <router-view></router-view>
    <!-- </KeepAlive> -->
  </div>
</template>


<script>
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  console.log(document.documentElement.clientWidth);
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'

  if (document.documentElement.clientWidth === 3840) {
    document.documentElement.style.fontSize = '24px'
  }
}

// 初始化
setRem()


// 改变窗口大小时重新设置 rem
window.onresize = function () {
  history.go(0);
  setRem()
}


export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'Alibaba PuHuiTi-Bold';
  src: url('@/assets/fonts/ALIBABA-PUHUITI-BOLD.TTF') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'PangMenZhengDao-3';
  src: url('@/assets/fonts/庞门正道标题体3.0.TTF') format('truetype');
  font-weight: bold;
  font-style: normal;
}


// 滚动条样式
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 1px solid transparent;
}

::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
}

::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
}

::-webkit-scrollbar-corner {
  background: transparent;
}
</style>