Vue进阶（幺捌伍）：动态设置系统字体_微信字体动态设置大小vue怎么监听

	}
}

},
// 重置系统主题色
resetSysColor () {
sessionStorage.removeItem(‘theme_color’)
this.changeSysConfig()
location.reload()
},
// 重置系统字体
resetSysFont () {
sessionStorage.removeItem(‘theme_font’)
this.sysFontSize = appConfig.themeFontSize
this.changeSysConfig(appConfig.themeFontSize)
},
// 更新系统主题色
changeSysConfig (val) {
let fontSize = 0
switch (val) {
case 1:
fontSize = ‘12’
break
case 2:
fontSize = ‘14’
break
case 3:
fontSize = ‘16’
break
}
document.querySelector(‘html’).style.fontSize = fontSize + ‘px’
let data = {
syscolor: curColor,
sysfont: fontSize
}
// 每次开关状态更改，保存开关状态
updateSysConfig(JSON.stringify(data)).then((response) => {
changeThemeColor(curColor)
sessionStorage.setItem(‘theme_font’, fontSize)
})
}

### 三、涉及知识点


* 动态设置`html`根字体大小

document.querySelector(‘html’).style.fontSize = fontSize + ‘px’

* 若适配不同屏幕（随着设备屏幕的大小而变化，从而实现响应式），建议采用以下逻辑：

var html =document.querySelector(‘html’);
html.style.fontSize = document.documentElement.clientWidth/10+‘px’;

* 如果设置了根字体大小，`font-size`单位必须是`rem`。
* 浏览器窗口更改后，监听屏幕尺寸变化逻辑如下：

window.onresize = () => {
let fontSize = window.innerWidth / 10
fontSize = fontSize > 50 ? 50 : fontSize
const html = document.querySelector(‘html’)
html.style.fontSize = fontSize + ‘px’
}

* **`CSS` 属性 选择器;**
* **`calc()` 函数用于动态计算长度值;**


### 四、注意事项


若存在父子组件引用，且子组件中异步获取后台返回值，并通过`state`方式存储，在父组件中应通过`watch`实现获取存储在`state`中的数据。在钩子函数`mounted()`中是无法获取的，因为涉及到父子组件生命周期，父组件`mounted`之前，子组件尚未完成渲染，未获取后台返回值。


加载渲染过程如下：



> 
> 父beforeCreate–> 父created–>父beforeMount–>子 beforeCreate–> 子 created–>子  
>  beforeMount–>子 mounted–>父mounted
> 
> 
> 


### 五、拓展阅读


* 《[Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（幺柒零）：前端用户体验提升（四）应用rem/em实现字体自适应](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（幺陆捌）：前端用户体验提升（三）应用vw/vh实现自定义布局](https://bbs.csdn.net/topics/618166371)》








### 总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

![](https://img-blog.csdnimg.cn/img_convert/d74f8b42f4a63c76b18efc6a818147df.png)

![](https://img-blog.csdnimg.cn/img_convert/6deb905d9655a3f0f54b8920686e1970.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)



**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)