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

Question

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

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

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

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

Comments

[Ankhena]

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

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

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

[Aetae]

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

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

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

Aetae, Что за глупости, если надо гарантировано вписываться в высоту, то достаточно единиц измерения vh, никакой js не нужен.

[Aetae]

Виталий Першин, во-первых: не "гарантировано вписать в высоту", а "гарантировано 1:1 вписать". Т.е. идеально, как будто это просто картинка.
Даже если ты идеально подгонишь все размеры относительно(задолбаешься) - разные размеры шрифта могут иметь специально разные начертания(для читаемости), плюс сам "размер шрифта" - параметр, увы, весьма условный, плюс всякие округления браузера... Так что прям 1:1 получится очень вряд-ли.
Во-вторых: я пометил ниже, что это вредный совет, т.е. скорее как забавная штука, которая может помочь в очень специфических случаях(иначе бы я это в Ответы писал). Мои основные мысли во второй части коммента.

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

Aetae,

Т.е. идеально, как будто это просто картинка.

для этого не нужен js, единицы vh именно так и сделают:

[Ankhena]

Виталий Першин, с одним нюансом: у браузера есть минимальный размер шрифта.

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

Ankhena, Открываем пример и сжимаем в ноль, только зачем?

[Ankhena]

Виталий Першин,

Открываем пример

Вы точно не забыли настройку минимального размера шрифта?
Для FF нужно делать нормальную страницу, а не песочницу. (По крайней мере у меня только так вышло в FF, в Хроме и так и так)

[Aetae]

Виталий Першин, видишь 1х 0.5х 0.25х внизу пена? Потыкай и сравни разницу в моём примере и в твоём. И разница может быть ещё больше, в зависимости от шрифта и вёрстки.

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

Aetae, Я не вижу никакой фантастической разницы, это же математика, какая там разница должна быть?

видишь 1х 0.5х 0.25х внизу пена?

какая пена, что ты несешь?)


Ankhena,

Вы точно не забыли настройку минимального размера шрифта?

У меня и в хроме и в ff одинаково все можно сжать в ноль. опять же вопрос для чего? В любом случае должно быть понимание, что в какой-то момент сжимать уже нет смысла и надо делать медиа и перестраивать верстку.

[Aetae]

Виталий Першин, а у меня не одинаково в хроме и фф, чудеса:

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

Aetae, О нет, какой кошмар, надо срочно делать костыль на js и выкручивать масштаб в 4-х измерениях :D

[Aetae]

Виталий Першин, это только один текст в одним div. А теперь посмотри на картинку автора запроса. Всё это надо относительно разметить и всё равно не факт, что не поедет.

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

Aetae, Ты серьезно? Нет, ты реально сейчас серьезно? Ты не понимаешь, что ты сделал? Ты выкрутил масштаб в браузере на 150% и в редакторе на 0.25 и у тебе браузер отрендерил шрифт подстраиваясь под количество пикселей в твоем экране, это никак не повлияет на пропорции, это чисто визуальный эффект, который видно, когда крутишь масштаб. Я до этого думал что ты рофлишь, а ты на полном серьезе? То есть ты бы, вместо того чтобы использовать нативный css и его возможности реально скейлил бы через js? Емае...

[Aetae]

Виталий Першин, я в самом начале написал откуда этот эффект и почему. Также как я в самом начале написал, что скейлить - вообще не вариант.
Иными словами: иди лесом да по кочкам. Отвечать тебе больше смысла не вижу.

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

Aetae, Нет, с самого начала ты написал

тут поможет только transform: scale + javascript:

А потом выдал какую-то чушь, что не получится 1:1. Так что сам иди крути масштаб дальше

[Ankhena]

Виталий Першин, Виталий, если в браузере установлен минимальный размер шрифта, то при вашем варианте он не уменьшится ниже этого значения.
Чтобы точно это увидеть, можно поставить утрированное значение.

Я только про это.
А не про идею автора уменьшать блок пропорционально высоте. Она очевидно плохая.

Answer 1

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

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

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