这个网站是一个具有页面尺寸适配功能的网站,它使用了rem作为单位。当页面尺寸发生变化时,会自动调整字体大小以适应不同的设备和屏幕尺寸。
在首页上,通过JavaScript代码实现了页面尺寸适配的功能。首先,通过获取文档元素和窗口对象来监听窗口尺寸变化事件或设备方向变化事件。然后,定义了一个名为recalc
的函数,该函数将根据当前窗口宽度计算并设置适当的字体大小。如果窗口宽度小于等于1024像素,则将字体大小设置为100像素;否则,将字体大小设置为(clientWidth / 1920) * 100
像素。
为了兼容不同浏览器和设备,这段代码首先检查是否支持addEventListener
方法。如果不支持,则直接返回而不执行任何操作。接下来,使用addEventListener
方法将resizeEvt
事件绑定到窗口对象上,并指定回调函数为recalc
,以便在窗口尺寸发生变化时触发相应的计算和设置。同时,还使用DOMContentLoaded
事件将recalc
函数绑定到文档加载完成时触发一次,确保初始化时的字体大小设置正确。
通过这种方式,该网站可以确保在各种设备和屏幕尺寸下提供良好的用户体验,而无需进行额外的样式调整。