How to keep the proportions of the mobile version of the site?

Question

css

There is already a layout site with a mobile version of 100% for a screen width of 320px, a layout of 320px.
An iPhone XS Max client wants the version that is available at 320px to be the same aspect ratio for his XS Max. In fact, nothing complicated, and as if the task is generally simple to make media queries only up to 992px. But it turns out that when the screen enlarges, the whole site moves around and everything becomes small, although everything is fine on a mobile phone at 320px.
I suspect that all sizes must be converted to percentages or to em values. But here I’m dumbing down something and I can’t figure out how to do this, can’t I adjust each dimensional grid from 320px to 992px manually in pixels?

Answer 1

1) Use the correct viewport
https://developer.mozilla.org/ru/docs/Mozilla/Mobi...
I used this
meta(name="viewport", content="width=device-width, user-scalable=no , initial-scale=1.0, maximum-scale=1.0")
2) Use relative units + viewport-bound units
(vw, vh) + calc in css
https://css-tricks.com/fun-viewport-units/
https://css-tricks.com/the-trick-to-viewport-units...
https://css-tricks.com/font-size-viewport-units/
It's not or, you need to use both the first and second

Answer 2

I suspect that all sizes must be converted to percentages or to em values.

Straight to the point this time! And secondly, in order for the layout to turn out to be adaptive, you need to think it over very well ... I'm making a link to you on this site for myself, as an example of an adaptive for you ... link . Almost done, but some examples can be adopted ...