通过css 中var函数实现系统字体放大功能

通过给基础标签设置默认字体大小，然后各标签通过rem方式来设置字体大小以及高宽度，通过点击 放大字体按钮，通过动态更改系统默认字体，来实现整体系统字体放大或者缩小功能

具体代码

js 部分

 setCurrentFont(val) {
     this.$nextTick(() => {
        document.body.style.setProperty(
          '--fontSize', val + 'px'
        );
        //这句是关键，否则无法动态更改标签上已有font-size的字体大小，以及无法自适应更改高度，宽度
        var root = document.querySelector(":root")
        root.style.setProperty("--fontSize", val + 'px')
     });
 }

css 部分

<style lang="scss">
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  font-size: var(--fontSize);
}

:not(.ql-editor span) {
  font-size: var(--fontSize);
}
</style>