根据屏幕是16：9,16：10还是4：3更改CSS

Question

我目前正在学校编写代码，我的任务是创建一个网页：

sendnoods.neocities.org

我已经拥有了16：9分辨率和16:10分辨率所需的所有主要图形和布局，但不知道如何用这些尺度实现不同的CSS。

我知道我可以使用以下方法设置最大宽度：

@media (max-width: 800px) { 
/* CSS that should be displayed if width is equal to or less than 800px goes here */
}

但有没有一种方法可以为16：9,16：10和4：3分辨率更加概括呢？

Answer 1

有aspect-ratio可用于媒体查询，例如：

@media screen and (aspect-ratio: 16/9) {
  ...
}

它指定显示区域的宽高比。

可以使用“min-”和“max-”前缀，如max-aspect-ratio:16/9

Answer 2

你可以使用aspect-ratio。

所以例如只是使用

@media (aspect-ratio: 16/9){
    //ur css
}