网站简介

这是一个响应式设计的网站，可以根据设备的像素比进行自适应。它能够根据屏幕宽度动态改变网页的字体大小，使得在不同设备上都能保持良好的阅读体验。

主要功能

  1. 自适应设计：通过检测设备的像素比(devicePixelRatio),以及窗口宽度(innerWidth),来动态调整网页元素的大小和位置，实现在不同设备上的适配。

  2. 响应式布局：通过监听页面的resize事件和pageshow事件，当浏览器窗口大小发生变化或页面从后台切换到前台时，重新计算并设置字体大小。

  3. 高DPI支持：在像素比大于2的情况下，创建一个新的body和div元素，用于模拟高DPI设备的显示效果。这可以提高图像和其他细节的清晰度。

技术原理

这个网站主要利用了CSS的媒体查询(Media Query)和JavaScript的事件监听(Event Listener)功能。通过CSS规则，我们可以为不同的设备尺寸设置不同的样式；而通过JavaScript,我们可以监听浏览器窗口大小的变化，从而实时更新网页内容。此外，还利用了DOMContentLoaded事件，确保在页面结构加载完成后再执行字体大小的计算和设置。