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转换
    }
  }
}

猜你喜欢

转载自www.cnblogs.com/mankii/p/12910871.html