根据屏幕是 16:9、16:10 还是 4:3 更改 CSS答案

【问题标题】：Changing CSS depending on if screen is 16:9, 16:10, or 4:3根据屏幕是 16:9、16:10 还是 4:3 更改 CSS
【发布时间】：2018-03-04 04:18:45
【问题描述】：

我目前正在学校学习编码，我的任务是制作网页：

我已经获得了 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 分辨率？

【问题讨论】：

【解决方案1】：

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

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

指定显示区域的宽高比。

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

【讨论】：

【解决方案2】：

您可以为此使用aspect-ratio。

例如，只需使用

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

【讨论】：