涵盖所有主要 PC 和笔记本电脑纵横比的媒体查询

Question

我想构建一些媒体查询来涵盖 pc/laptops 的大部分纵横比。

我的第一次尝试是这样的：

@media screen and (min-device-aspect-ratio: 4/3){
     header::after{
         content: '4/3';
     }

 }

@media screen and (min-device-aspect-ratio: 16/9){
      header::after{
         content: '16/9';
     }
 }

 @media screen and (min-device-aspect-ratio: 16/10){
      header::after{
         content: '16/10';
     }
 }

我正在测试来自分辨率为 1366x768（宽高比为 16/9）的笔记本电脑的这些查询，而不是执行最后一个 16/10 的查询。

我可以用经典的方式做到这一点：

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

但我认为响应式设计应该更多地关注纵横比而不是屏幕宽度，因为它在 4:3 和宽屏 16/9 之间有很大差异，或者我可能误解了响应式设计概念，但这就是我的想法。

Answer 1

要解决在 16/9 处于活动状态时执行 16/10 的问题，您必须定义 device-aspect-ratio 而不是 min-device-aspect-ratio，因为您是在告诉浏览器它们（16/10 和16/9) 是有效代码，它执行最后定义的代码。

 @media screen  and (device-aspect-ratio: 16/9) {
     /* execute only in 16/9 */
 }

 @media screen  and (device-aspect-ratio: 16/10) {
     /* execute only in 16/10 */
 }

版本

正如 God (MDN) 所说，device-aspect-ratio 已被弃用，我们必须使用 aspect-ratio 代替。它接受 min 和 max 前缀。

• Media Queries: device-aspect-ratio
• Media Queries: aspect-ratio

Answer 2

响应式设计的理念很简单：您的设计响应使用您的设计的媒体的变化甚至按需变化。您是通过查看屏幕分辨率还是通过屏幕宽高比来执行此操作完全是一个实现细节，并不是很相关。

比率 16/9 的计算结果为 1.777... 而比率 16/10 的计算结果为 1.6。由于比率 16/9 明显大于 16/10，因此 min-device-aspect-ratio: 16/9 必然也是 min-device-aspect-ratio: 16/10.

解决办法是把16/10查询放在16/9之前，这样所有的比率都是升序排列的：

@media screen and (min-device-aspect-ratio: 4/3) {
    header::after {
        content: '4/3';
    }
}

@media screen and (min-device-aspect-ratio: 16/10) {
    header::after {
        content: '16/10';
    }
}

@media screen and (min-device-aspect-ratio: 16/9) {
    header::after {
        content: '16/9';
    }
}

请参阅我对 的回答以了解其工作原理。