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

Question

我想构建一些媒体查询,以涵盖PC /笔记本电脑的大部分宽高比.

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

@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 */
 }

版

正如上帝(MDN)所说,device-aspect-ratio已被弃用,我们必须aspect-ratio改为使用.它接受min和max前缀.

• 媒体查询:设备宽高比
• 媒体查询:宽高比

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/9之前放置16/10查询,以便所有比率按升序排列:

@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';
    }
}

请参阅我对此相关问题的答案,以解释其工作原理.