根据屏幕是 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