Changing CSS depending on if screen is 16:9, 16:10, or 4:3

Question

I'm currently learning coding at school and I am tasked with making a webpage:

sendnoods.neocities.org

I've already got all of the main graphics and layout I need for 16:9 resolution and 16:10 resolution, but don't know how to implement a different css with those scales.

I know I can set the max-width using:

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

But is there a way I can more generalize it for 16:9, 16:10 and 4:3 resolutions?

Answer 1

There is aspect-ratio which can be used in media queries, for example:

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

It specifies the width/height ratio of the display area.

"min-" and "max-" prefixes can be used, like max-aspect-ratio:16/9