Css change percentages on aspect ratio

Question

Ok, so i build a site in percentages for an aspect ratio of 16/9. If i scale the website and the aspect ratio on my website changes, all elements fly in a different direction.This is because the height and width dont keep the same aspect ratio as in which i build it. There is the max and min width in css. But these dont exactly help me with my problem. I know i messed up, but is there a way to target aspect ratio`s and make my percentages respond to the different ratios?

if not, got any tips to make my website cool looking on ANY screensize? BTW you can find my website on: www.joeptenhaaf.nl

Please help me :)

Joep

Answer 1

You could put everything in a wrapper div whose aspect ratio is maintained using the answer here (maintain aspect ratio of a div)

Alternatively, or in conjunction, you could use CSS media queries to make the site display differently in response to different display sizes (width, height or both). This all goes in the CSS. One way is to build the site's layout CSS for a smaller screen first, and then add the media query containing the modified CSS values for the same elements at every larger size value, ex. resizing header text size for phone, tablet, and computer sized devices:

header {
font-size: 14px; }

@media only screen and (min-width: 481px) { 
header {
font-size: 20px; }
}
@media only screen and (min-width: 800px) { 
header {
font-size: 40px; }
}

You could also start with making the site for a bigger screen, and then having a media query like:

@media only screen and (max-width: 799px) {

}

You can also make it respond to height.

Hope this helps!

edit: I think I might have misinterpreted your question. You can media query in response to aspect ratios too though, so this would be your solution!