如何简化媒体查询中视频适配多分辨率的实现？

一、无需手动罗列分辨率的视频适配方案 #

目前最成熟且无需逐个适配分辨率的方案是自适应流媒体技术，比如HLS（HTTP Live Streaming）或DASH（Dynamic Adaptive Streaming over HTTP）：

• 原理：将视频切割成不同码率/分辨率的分片，同时生成包含所有分片信息的索引文件（如HLS的.m3u8）。浏览器会自动根据当前设备的屏幕分辨率、网络带宽，动态选择最合适的分片加载播放，完全不需要手动编写多套分辨率的适配规则。
• 示例代码：

<video controls>
  <source src="video-adaptive.m3u8" type="application/x-mpegURL">
  <!-- 降级方案：提供一个基础分辨率的视频 -->
  <source src="video-fallback.mp4" type="video/mp4">
</video>

另外，部分现代浏览器已开始实验性支持<video>结合srcset属性（类似图片的用法），可以直接指定不同分辨率的视频文件，让浏览器自动选择：

<video controls 
       srcset="video-720p.mp4 1280w,
               video-1080p.mp4 1920w,
               video-4k.mp4 3840w"
       sizes="100vw">
  <source src="video-fallback.mp4" type="video/mp4">
</video>

不过这个特性目前还未完全普及，需要做好降级处理。

二、相关推进中的技术 #

• 原生video的srcset与sizes标准化：W3C正在推进将图片的srcset/sizes逻辑迁移到视频元素上，目前Chrome、Edge等浏览器已在实验性支持阶段，未来有望成为原生标准方案，彻底解决视频分辨率自动适配的问题。
• 设备感知的流媒体优化：部分浏览器和CDN厂商正在推进更智能的自适应流策略，不仅考虑分辨率和带宽，还会结合设备性能、电池状态等因素，进一步优化视频加载体验。

三、查询视口实际设备像素的媒体特性 #

有两种常用的媒体查询特性可以获取设备的实际像素密度：

• device-pixel-ratio：直接匹配设备的像素比，比如(min-device-pixel-ratio: 2)对应Retina及以上屏幕，(min-device-pixel-ratio: 3)对应3倍密度的高分辨率屏幕（如部分安卓旗舰、5K显示器）。
• resolution：以每英寸像素（dpi）或每CSS像素的设备像素（dppx）为单位，比如(min-resolution: 2dppx)和(min-device-pixel-ratio: 2)效果等价，部分浏览器对resolution的支持更全面。

示例用法（配合<source>的media属性）：

<video controls>
  <source src="video-4k.mp4" type="video/mp4" media="(min-device-pixel-ratio: 3)">
  <source src="video-1080p.mp4" type="video/mp4" media="(min-device-pixel-ratio: 2)">
  <source src="video-720p.mp4" type="video/mp4">
</video>

内容的提问来源于stack exchange，提问作者Andy