首页 > 浏览器窗口调整尺寸时怎样让字体尺寸联动?

浏览器窗口调整尺寸时怎样让字体尺寸联动?

有css的解决方案吗?


必须JS去监听resize事件


JavaScript solution:

window.addEventListener('resize', function(){
    var ratio = Math.sqrt((window.innerWidth / 1024) * (window.innerHeight / 768))
    document.body.style.fontSize = (16 * ratio) + 'px';
});

纯css解决方法的话就是media queries了。不过我觉得这种不灵活,因为是断点而不是完全跟随窗口变化。
最好的解决办法是利用js监听resize事件然后更改html元素的font-size,然后其他子元素字体单位用REM

【热门文章】
【热门文章】