我正在使用 max-width: 768px 更改我网站上的外观。但是市场上有许多高分辨率设备（4K 手机等）。我怎样才能检测到它们？我应该使用方向肖像吗？或者我可以指定纵横比作为代码吗？为响应式网页设计捕获所有设备的最佳方法是什么？
答案 0 :(得分：1)
对于此问题，您有多种选择：
在您的媒体查询中，您可以测试设备 width、分辨率 (pixel density)、orientation、aspect ratio、pointer 选项等等。有关选项的完整列表，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries。
建议按功能而不是按环境来支持您的实现。例如，您可以定位 dark/light 模式，或者如果设备支持 hover 事件而不是检查 phone、tablet、desktop、tv、 gaming console …
您还可以组合不同的 CSS 单位，如 em、vmin、vh、vh、% 以获得相对测量值。
这与 CSS grid 相结合已经可以解决许多问题，而无需定义媒体查询。
当然，最终您可能仍然会遇到一些 媒体查询。为此，我建议选择 2-4 种常见的屏幕尺寸，尽管这并不能保证它可以覆盖所有设备。
我还可以向您推荐来自 The CSS Podcast 的这些剧集