这是一个JavaScript函数,用于根据网页的宽度调整字体大小。这个函数主要在浏览器窗口大小改变时触发,从而实现动态调整字体大小以适应不同的屏幕尺寸。
通过document.documentElement
获取文档根元素。然后定义一个变量resizeEvt
,用于存储触发窗口大小改变事件的名称。这里使用了兼容性的方式,如果浏览器支持orientationchange
事件,则使用该事件;否则使用resize
事件。
定义了一个名为recalc
的函数,用于计算并设置基础字体大小。在这个函数中,首先获取文档根元素的宽度(clientWidth
),然后根据宽度判断当前的设备类型(手机或平板)。如果宽度小于1200像素,说明是手机设备,此时将基础字体大小设置为400 * (clientWidth / 750)
;否则是平板设备,将基础字体大小设置为200
。最后将计算得到的基础字体大小(以像素为单位)应用到文档根元素的样式属性fontSize
上。
为了实现在窗口大小改变时触发字体大小调整,代码中使用了if (document.addEventListener)
判断浏览器是否支持addEventListener
方法。如果支持,就调用recalc()
函数进行首次字体大小调整,并使用window.addEventListener(resizeEvt, recalc)
添加一个事件监听器,当窗口大小改变时再次调用recalc()
函数进行字体大小的动态调整。