2

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?

Ronan Boiteau
  • 9,608
  • 6
  • 34
  • 56
Send Noods
  • 29
  • 1
  • 2
  • 1
    There are `min-aspect-ratio` and `max-aspect-ratio` operators in [CSS media queries.](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) – Pointy Feb 22 '17 at 14:44
  • possible duplicate http://stackoverflow.com/q/5725838/3029422 – Ionut Feb 22 '17 at 14:44
  • 2
    you should optimize the images, the page load time is ~2000 ms – Ionut Feb 22 '17 at 14:50

2 Answers2

6

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

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thanks for helping, although I didn't get this to work I did manage to find a workaround. – Send Noods Feb 23 '17 at 14:25
  • You could also try `device-aspect-ratio` - same principle, but dependent on the device itself, not on the browser window – Johannes Feb 23 '17 at 15:11
0

You can use aspect-ratio for this.

So for example just use

@media (aspect-ratio: 16/9){
    //ur css
}
Yannick Huber
  • 607
  • 2
  • 16
  • 35