javascript - Changing CSS depending on if screen is 16:9, 16:10, or 4:3 - Stack Overflow

admin管理员组

文章数量:1356566

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

Share Improve this question Follow edited Mar 3, 2018 at 20:18 Ronan Boiteau 10.2k77 gold badges3838 silver badges5959 bronze badges asked Feb 22, 2017 at 14:41 Send NoodsSend Noods 4911 silver badge22 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

You can use aspect-ratio for this.

So for example just use

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

本文标签： javascriptChanging CSS depending on if screen is 1691610or 43Stack Overflow