App.vue 720 B

123456789101112131415161718192021222324
  1. <template>
  2. <router-view v-slot="{ Component }">
  3. <keep-alive>
  4. <component :is="Component" />
  5. </keep-alive>
  6. </router-view>
  7. </template>
  8. <script setup>
  9. // 自适应
  10. function resize() {
  11. let fs = document.body.clientWidth / 10;
  12. // 上面的75是根据设计图尺寸修改,例如设计图宽为1220,给左右两边各留10px,即1220-20=1200,1200/16(字体大小)等于75
  13. // if (fs > 16) { // 控制字体大小,以免过大过小
  14. // fs = 16;
  15. // } else if (fs < 14) {
  16. // fs = 14;
  17. // }
  18. // ??注意这里不能直接document.body.style
  19. document.body.parentNode.style = "font-size: " + fs + "px;";
  20. }
  21. // resize();
  22. // window.onresize = resize;
  23. </script>