css里面引用变量动态改变字体大小

tanzongbiao

已于 2024-10-07 22:26:34 修改

阅读量146

点赞数 1

文章标签： css 前端 javascript

于 2024-10-04 19:07:50 首次发布

本文链接：https://blog.csdn.net/tanzongbiao/article/details/142706195

版权

  created() {
    // 字体大小
    let fontSizeTemp = '18px'
    const fontSizeStr = this.$store.getters.size
    if (fontSizeStr === 'default') { // 默认
      fontSizeTemp = '18px'
    } else if (fontSizeStr === 'medium') { // 大
      fontSizeTemp = '28px'
    } else if (fontSizeStr === 'small') { // 中
      fontSizeTemp = '24px'
    } else if (fontSizeStr === 'mini') { // 小
      fontSizeTemp = '18px'
    }
    document.documentElement.style.setProperty('--page-font-size', fontSizeTemp)
  },

<style>
/* css里面引用变量【注意：style不能加scoped 会导致此处的设置失效】 */
:root {
  --page-font-size: 18px;
}

.text-question {
  display: flex;
  flex-wrap: wrap;
  /* font-size: 18px; */
  font-size: var(--page-font-size);
  margin-top: 10px;
  /* user-select: none; */
}
</style>