css - 涵盖所有主要 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 */
 }

版本

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

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