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

请参阅我对this related question的回答，了解其工作原理。

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

2 个答案:

版