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

sendnoods.neocities

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?

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

sendnoods.neocities

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?

• javascript
• html
• css
• responsive-design
• media-queries

• 2 There are min-aspect-ratio and max-aspect-ratio operators in CSS media queries. – Pointy Commented Feb 22, 2017 at 14:44
• possible duplicate stackoverflow./q/5725838/3029422 – Ionut Commented Feb 22, 2017 at 14:44
• 2 you should optimize the images, the page load time is ~2000 ms – Ionut Commented Feb 22, 2017 at 14:50

2 Answers 2

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

You can use aspect-ratio for this.

So for example just use

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