cac-fronted/src/App.vue

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

<script>
export default {
  data() {
    return {
      windowWidth: 0,
      htmlFontSize: 16, // 默认的html字体大小
    };
  },
  mounted() {
    this.setRemUnit();
    this.windowResize();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.windowResize);
  },
  methods: {
    setRemUnit() {
      // 设置所有的rem单位
      const remUnit = () => {
        return this.htmlFontSize; // 假设1rem等于10px
      };
      document.documentElement.style.fontSize = remUnit();
    },
    windowResize() {
      // 监听窗口的resize事件
      this.windowWidth = window.innerWidth;
      const remUnit = () => {
        return this.htmlFontSize; // 假设1rem等于10px
      };
      // 根据窗口宽度动态设置html的字体大小
      document.documentElement.style.fontSize = `${remUnit()}px`;
    },
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;
}
a {
  text-decoration: none;
  color: #fff;
}
#app {
  width: 100%;
  height: 100%;
}
body {
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, "microsoft yahei",
    arial, STHeiTi, sans-serif;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* 关键代码 */
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 32px;
}
</style>