各有所爱

这是一个使用HTML5的全屏API创建响应式视频播放器的示例网站。该网站使用了video.js库来实现视频播放功能，并通过CSS样式设置了播放器的宽度和高度。同时，该网站还使用了JavaScript代码来自动调整页面字体大小以适应不同设备的屏幕尺寸，并通过检测浏览器是否支持CSS变量来应用不同的样式。

# 示例网站：响应式视频播放器

## 播放器样式
- `.video-js`:视频播放器容器的样式，设置了宽度为300px,高度为150px。
- `.vjs-fluid`:为了使视频播放器在不同设备上自适应宽度而使用的样式，设置了padding-top为56.25%,即容器高度的56.25%。

## 自适应字体大小
- 通过添加DOMContentLoaded事件监听器，确保在页面完全加载后再执行JavaScript代码。
- 使用`document.documentElement.style.fontSize`将页面字体大小设置为视口宽度的一半。这样可以使页面字体在不同分辨率下保持一致的大小。
- 利用CSS变量和`CSS.supports`函数检测浏览器对CSS变量的支持情况，根据检测结果选择合适的样式应用。

## 响应式设计(仅适用于支持CSS变量的浏览器)
- 如果浏览器支持CSS变量(如Chrome),则会自动应用相应的样式。否则，不会应用任何样式。
- CSS变量的使用可以根据具体的设计需求进行调整，以达到最佳的响应式效果。

## 总结
这个示例网站展示了如何使用HTML5的全屏API以及video.js库来创建一个响应式的视频播放器。同时，通过自适应字体大小和检测浏览器对CSS变量的支持来优化页面在不同设备上的显示效果。