                        课程
                    
                        /前端开发
                        
                            /Vue.js
                        
                        /快速入门Web阅读器开发

这一节有个问题字体变大可以轻松实现但是不是动态变化的就算页面缩小字体也没有变化请问老师是什么原因那是不是因为我之前下载了elementUI依赖有了冲突

qq_梦紫菱_0

2018-08-23

源自：快速入门Web阅读器开发 2-4

关注问题我要回答

1257

操作

收起

1 回答

Sam
2018-08-23

你好，目前这种实现方式是不支持字体动态变化的，浏览器窗口更改后，需要重新刷新页面才能获得字体变化，因为这个DOMContentLoaded事件只会在DOM加载完成后触发一次，这样做的目的是考虑到使用场景是移动端，手机的尺寸和分辨率通常是不会变化的，所以只需加载一次即可。如果你想实现动态改变字体大小，可以参考如下的实现方式（监听屏幕尺寸变化）：

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