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

Question

[Андрей Самойленко]

Верстаю форму опроса с единственным полноэкранным блоком.
На пк блок опроса выглядит вот так:

На ноуте вот так:

Вопрос:
Как сделать чтобы белый блок с опросом пропорционально масштабировался вместе со шрифтами, отсутпами и т.д.
Сейчас у меня все в px. Мне нужно все перевести в проценты?
Как мне рассчитывать размеры вертикальных отступов например в процентах? как у шрифтов?

Comments

[Ankhena]

Как сделать чтобы белый блок с опросом пропорционально масштабировался вместе со шрифтами, отсутпами и т.д.

А что будет, если у пользователя открыты девтулзы или браузер открыт узкой полоской?

Что можно использовать:
- единицы vw, vh, vmin, vmax
- функции min, max, clamp
- для визуальных отступов можно использовать гриды или поставить их в зависимость от размера шрифта.

[Aetae]

Если надо масштабировать прям гарантировано 1:1 вписывая в высоту, то тут поможет только transform: scale + javascript:
Но это "вредные советы".:)

Ты уверен что хочешь ломать глаза людям с маленьким монитором? Может лучше предусмотреть разбивку на две колонки если не вписывается?

Answer 1

[Виталий Першин]

Можно перевести все в rem, а для html задать динамический размер в зависимости от размера экрана с учетом высоты и ширины, вроде такого:

html {
    font-size: calc(max(0.5vw, 4px) + max(0.5vh, 4px));
}