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

【问题标题】：Media queries to cover all major pc and laptops aspect ratio涵盖所有主要 PC 和笔记本电脑纵横比的媒体查询
【发布时间】：2015-12-19 02:14:48
【问题描述】：

我想构建一些媒体查询来覆盖 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 之间的巨大差异，或者我可能误解了响应式设计概念，但这是我的想法。

【问题讨论】：

赏金呢？
@Marcos Pérez Gude：由于在我们都发布了我们的答案之后提供了赏金，我们都没有资格获得 1/2 赏金汽车奖。由于没有新的合格答案，赏金永远消失了。 OP 最后一次出现是在宽限期内，看起来他们选择不手动授予它。我不能代表 OP，但我从来没有真正考虑过我自己的答案来充分解决他们的问题。如果它让你感觉更好，我们的答案在赏金期间获得了大量的支持，这足以弥补赏金的数额。
是的，这是真的，但如果人们不想提供赏金，我不明白他为什么要提供。赏金是由另一个人发起的，而不是 OP。
我不能给予赏金......正如 Bolt 所说，虽然我没有解决我的问题，但两个答案都非常有帮助，我决定对所有主要分辨率使用 min-width ，至少我已经明白为什么我的尝试没有成功，感谢bolt。
@Marcos Pérez Gude：啊，我的错。

标签： css responsive-design media-queries screen-resolution aspect-ratio

【解决方案1】：

响应式设计的理念很简单：您的设计可以响应使用您的设计的媒体的变化，甚至是按需更改。无论您是通过查看屏幕分辨率还是通过屏幕纵横比来做到这一点，这完全是一个实现细节，并不是很相关。

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

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

【讨论】：

正如您在我的问题中看到的，这正是我的想法，问题仍然存在
@Petru Lebada：我的错误，我忘了在我的答案中实际交换它们。在您自己的代码中尝试后，它仍然对您不起作用吗？另请注意，aspect-ratio 和 device-aspect-ratio 不是一回事 - 后者不会根据浏览器窗口的大小而改变，并且只有在您假设浏览器窗口始终最大化或全屏时才真正起作用（我怀疑这就是为什么它首先被弃用的原因，因为它在实践中并没有真正起作用）。
是的，它现在可以工作，但只是因为它是最后一个查询，例如，如果您将 4/3 查询移到最后，它将被使用，当然这是因为 min ，其中还包括 16/9 ， 16/10 等等....仍然可以找到仅针对某个范围的查询...

【解决方案2】：

要解决在 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 前缀。

【讨论】：

因为 1366/768 (1.77864...) 不完全等于 16/9 (1.77777...)。这正是使用min 限定符@Marcos 的原因。
是的，你说得对，很难针对特定分辨率进行媒体查询，但比率可以帮助您。
支持弃用的设备宽高比，我不知道。