Как сохранить пропорции мобильной версии сайта?

Question

[Lord_Dantes]

Есть уже сверстанный сайт с мобильной версией 100% на ширину экрана 320px, макет на 320px.
У клиента iPhone XS Max, он хочет чтобы версия которая доступна с 320px была такая же с сохраненными пропорциями и для его XS Max. По сути ничего сложного, и как бы задача вообще проста сделать медиа-запросы только до 992px. Но получается так что у меня когда увеличивается экран весь сайт разъезжаться и как бы все становится мелким, хотя на мобилке в 320px все норм.
Я так подозреваю что все размеры нужно переводить в проценты или в значения em. Но вот туплю что-то и не могу понять как такое сделать, не подганять же каждую размерную сетку с 320px до 992px вручную в пикселях?

Answer 1

[Владимир]

1) Используй правильный вьюпорт
https://developer.mozilla.org/ru/docs/Mozilla/Mobi...
Я использовал такой
meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0")
2) Используй относительные единицы измерения + единицы привязанные к вьюпорту
(vw, vh) + calc в 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/

Это не или, нужно исаользовать и первое и второе

Answer 2

[Дмитрий Дмитрий]

Я так подозреваю что все размеры нужно переводить в проценты или в значения em.

Прямо в точку это раз! А во вторых чтоб макет получился адаптивным нужно его очень хорошо продумать... На тебе ссылку я этот сайт для себя делаю, как пример адаптива тебе... ссылка. Чуть не до деланый но какие то примеры можно взять на вооружение...