更改CSS：9，16：10，或4：3

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 (aspect-ratio: 16/9){ 
    //ur css 
} 

Answer 2

有aspect-ratio可以在媒體查詢中使用，例如：

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

它指定的顯示區域的寬度/高度比。

「MIN-」 和 「MAX-」 前綴可以使用，像max-aspect-ratio:16/9