uniapp 切换字体大小

uniapp 切换字体大小

1、单院H5模式

<template>
  <!-- 添加根标签 page-meta 设置 字体属性变量 -->
  <page-meta :root-font-size="rootFS">
    <view class="name">hello world</view>
  </page-meta>
</template>

<script>
  export default {
    data() {
      return {
        rootFS: '10rpx' // 字体属性变量
      }
    },

    created() {
      // 通过修改 字体属性变量 切换关怀模式
      setTimeout(() => {
        this.rootFS = '12rpx';
      }, 3000);
    }
  }
</script>

<style scss>
  /* 1rem单位为 根标签上的 字体大小 */
  .name {
    /* font-szie: 24rpx; */
    font-szie: 2.4rem;
  }
</style>

2、class模式

<template>
  <!-- 编写两种class样式 -->
  <view :class="[isCaring ? 'caring-style' : 'default-style']">
    <view class="name">hello world</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isCaring: false // 开启关怀模式?
      }
    },

    created() {
      // 通过修改 isCaring变量 切换关怀模式
      setTimeout(() => {
        this.isCaring = true;
      }, 3000);
    }
  }
</script>

<style>
/* 普通样式 */
.default-style {
  .name {
    font-size: 24rpx;
  }
}

/* 关怀模式样式 */
.caring-style{
  .name {
    font-size: 28rpx;
  }
}
</style>

3、变量切换模式

<template>
  <!-- css 使用 js变量 -->
  <view class="homepage" :style="[fsObj]">
    <view class="name">hello world</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        fsObj: { // fs对象
          '--fs24': '24rpx'
        }
      };
    },

    created() {
      // 通过修改 fsObj对象 切换关怀模式
      setTimeout(() => {
        this.fsObj =  {
          '--fs24': '28rpx'
        };
      }, 3000);
    }
  }
</script>

<style scss>
  .homepage {
    .name {
    	font-size: var(--fs24);
    }
  }
</style>

SCSS混入模式

切换字体大小时，行高是否需要修改？

<template>
  <view class="name">hello world</view>
</template>

<style scss>
/*   定义混入 */
@mixin fs24 {
  font-size: 24rpx;
  line-height: 24rpx * 1.5;
}

/* 使用混入 */
.name {
  /* 类似于
  font-size: 24rpx;
  line-height: 24rpx * 1.5;
  */
  @include fs24();
}
</style>