CODEWITHSUNDEEP
javascripthtmlcssresponsive-designmedia-queries
Send Noods
Send Noods

Reputation: 49

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

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?

Upvotes: 4

Views: 5460

Answers (2)

Johannes
Johannes

Reputation: 67798

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

Upvotes: 8

Yannick Huber
Yannick Huber

Reputation: 617

You can use aspect-ratio for this.

So for example just use

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

Upvotes: 0

Related Questions