根据屏幕尺寸设置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>

相关推荐

  1. 根据屏幕尺寸设置html字号fontSize大小刷新

    2024-01-16 11:30:03       58 阅读
  2. html根据屏幕分辨率大小字体自动变大缩小

    2024-01-16 11:30:03       34 阅读
  3. html元素以及元素字体的含义

    2024-01-16 11:30:03       55 阅读
  4. flutter 获取屏幕尺寸

    2024-01-16 11:30:03       39 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-16 11:30:03       91 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-16 11:30:03       97 阅读
  3. 在Django里面运行非项目文件

    2024-01-16 11:30:03       78 阅读
  4. Python语言-面向对象

    2024-01-16 11:30:03       88 阅读

热门阅读

  1. Ubuntu纯净服务器系统使用Nginx+uwsgi部署django项目

    2024-01-16 11:30:03       53 阅读
  2. Vue+Koa2 搭建前后端分离项目

    2024-01-16 11:30:03       50 阅读
  3. 距离场和距离变换:distance_transform

    2024-01-16 11:30:03       60 阅读
  4. 计算机视觉市场分析:预计2029年将达到870亿元

    2024-01-16 11:30:03       54 阅读
  5. 代码仓库gitlab的数据迁移步骤

    2024-01-16 11:30:03       46 阅读
  6. Github Copilot 的使用方法和快捷键

    2024-01-16 11:30:03       55 阅读
  7. Github Copilot 的使用方法和快捷键

    2024-01-16 11:30:03       83 阅读
  8. 【go语言】读取toml文件

    2024-01-16 11:30:03       58 阅读
  9. @Autoware和@Resource区别

    2024-01-16 11:30:03       51 阅读
  10. 鸿蒙开发笔记(二):自定义组件

    2024-01-16 11:30:03       57 阅读
  11. uniapp+vue3面试纪要

    2024-01-16 11:30:03       55 阅读