js设置html根节点的style字体Vue动态调整全局字体大小

Posted 2021-02-18 Mankii

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js设置html根节点的style字体Vue动态调整全局字体大小相关的知识，希望对你有一定的参考价值。

html根节点即<html></html>

?直接用document.getElementByTagName(‘HTML‘)获取不成功

?要使用document.documentElement，如下

var docEl = document.documentElement
docEl.style.fontSize = ‘20px‘

PS：配合‘postcss-pxtorem‘插件，并用上述方式动态修改根元素的字体，可以实现【动态调整全局字体大小】的功能，

配置postcss-pxtorem，只需在postcss.config.js中写：

module.exports = {
  plugins: {
    autoprefixer: {},
    ‘postcss-pxtorem‘: {
      rootValue: 16, 
      propList: [‘font-size‘] // 只转化font-size

// propList: [‘*‘], // 转化全部

// propList: [‘*‘,‘!border‘], //转化全部，除了border属性

// selectorBlackList: [‘body‘] // 过滤掉.am-开头的class，不进行rem转换

    }
  }
}

以上是关于js设置html根节点的style字体Vue动态调整全局字体大小的主要内容，如果未能解决你的问题，请参考以下文章