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?

There are min-aspect-ratio and max-aspect-ratio operators in CSS media queries. — Pointy
– Pointy, Commented Feb 22, 2017 at 14:44
you should optimize the images, the page load time is ~2000 ms — Ionut
– Ionut, Commented Feb 22, 2017 at 14:50

Johannes · Accepted Answer · 2017-02-22 14:47:50Z

8

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

answered Feb 22, 2017 at 14:47

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Send Noods Over a year ago

Thanks for helping, although I didn't get this to work I did manage to find a workaround.

Johannes Over a year ago

You could also try device-aspect-ratio - same principle, but dependent on the device itself, not on the browser window

Dario Corbelli Over a year ago

device-aspect-ratio is deprecated, as reported here: developer.mozilla.org/en-US/docs/Web/CSS/@media/…

Yannick Huber · Accepted Answer · 2017-02-22 14:47:05Z

You can use aspect-ratio for this.

So for example just use

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related