uniapp动态设置字体统一大小-猿码集

uniapp动态设置字体统一大小

在开发uniapp应用时，我们经常会遇到需要统一设置多个页面的字体大小的情况。如果手动一个一个去修改样式表，非常麻烦且容易出错。因此，本文将介绍一种使用JS动态设置字体大小的方法，以实现多个页面字体大小统一的效果。

Step 1：新增css文件

首先，我们需要新增一个css文件，用于存放我们将要动态设置的字体大小。在项目的css目录下创建一个新文件，比如叫做global.css。在这个文件中，我们定义一个全局的CSS变量，作为字体大小的基准值。代码如下：


:root {
  --font-size-base: 16px;
}

此处我们将字体大小的基准值设置为16px。当我们需要修改字体大小时，只需要改变这个变量的值即可。

Step 2：在App.vue中引入css

接下来，我们需要将global.css文件引入到App.vue中，以保证它能够在整个项目中生效。在App.vue中，新增如下代码：


<template>
  <div class="app">
    <!-- 其他内容 -->
  </div>
</template>
<style lang="scss">
/* 引入 global.css */
@import "@/css/global.css";
.app {
  /* 设置全局字体大小 */
  font-size: var(--font-size-base);
}
</style>
<script>
export default {
  name: "App",
  // 省略其他代码
};
</script>

上面代码中的@import "@/css/global.css";表示引入刚刚定义的global.css文件。然后给.app元素设置一个font-size的样式，值为我们定义的全局变量--font-size-base。

Step 3：使用JS动态修改字体大小

到这一步，我们已经完成了全局的字体大小设置。但是如果我们需要在某个页面中单独修改字体大小，该怎么办呢？这时候我们可以使用JS动态修改--font-size-base的值，以实现页面内字体大小的修改。

以下是一个简单的实现方案：


export default {
  name: 'MyPage',
  data() {
    return {
      // 初始字体大小
      fontSizeScale: 1,
    };
  },
  mounted() {
    // 获取屏幕宽度
    const screenWidth = uni.getSystemInfoSync().screenWidth;
    // 如果屏幕宽度小于375，说明属于小屏手机
    if (screenWidth < 375) {
      // 缩小字体大小
      this.fontSizeScale = 0.8;
    }
    // 动态修改字体大小
    this.setRootFontSize();
  },
  methods: {
    setRootFontSize() {
      // 获取屏幕宽度
      const screenWidth = uni.getSystemInfoSync().screenWidth;
      // 设置默认基准宽度值
      let baseWidth = 375;
      // 如果是iPad，则使用768作为基准宽度
      if (/iPad/i.test(navigator.userAgent)) {
        baseWidth = 768;
      }
      const rem = screenWidth / baseWidth;
      // 获取global.css中定义的字体基准大小
      const baseFontSize = parseFloat(
        getComputedStyle(document.documentElement).fontSize
      );
      // 计算新的字体大小
      const newFontSize = baseFontSize * rem * this.fontSizeScale;
      // 设置根元素的字体大小
      document.documentElement.style.fontSize = `${newFontSize}px`;
    },
  },
  // 省略其他代码
};

上述代码中，我们先在data中定义了一个fontSizeScale的变量，用于控制字体大小的缩放比例，默认为1。

在mounted生命周期函数中，我们获取当前屏幕宽度，并根据屏幕宽度设置一个fontSizeScale的值。这里我们以375px作为基准宽度，如果屏幕宽度小于375px，则将字体大小缩小20%，再动态修改--font-size-base的值。

动态修改字体大小的方法在setRootFontSize中实现。我们先获取屏幕宽度，然后根据基准宽度计算出屏幕宽度与基准宽度的比例，从而得到rem的值。接下来，我们获取global.css中定义的字体基准大小，再根据rem和fontSizeScale的值计算出新的字体大小，并将其应用到根元素（html）上。

使用这种方法，我们就能够方便地动态设置多个页面的字体大小，实现字体大小的统一效果。

uniapp动态设置字体统一大小