Как сохранить пропорции размеров всех элементов при изменении размеров родительского элемента?

Question

[Qubert]

Здравствуйте!

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

Представим, что я делаю презентацию: сверстать все эти свойства для одного экрана не представляет проблем, но, что если я буду смотреть на эту презентацию на большом экране или супер-маленьком, получится, что текст в 20рх будет мелко смотреться на большом и маленьким на очень большом

Как мне решить эту проблему? возможно написать функцию на js? спасибо!

Answer 1

[Юрий Лобанов]

Используйте или media запросы, или новые единицы измерения, например: vw, vh.
Пример использования: codepen.io/iiil/pen/pIHCG

Советую ознакомиться shpargalkablog.ru/2013/03/px-em-calc.html

Answer 2

[vdem]

В первую очередь не используйте пикселы в качестве единиц измерения. Используйте проценты, pt, in, mm.

Comments

[Qubert]

я так и делаю! но, что, если мне придется сделать превьюшку для презентации, это уже не так и поможет! мне нужно именно изменять размер
у меня есть функция, которая возвращает измененную ширину главного дива

[vdem]

См. CSS @media, можно переопределять размеры в зависимости от разрешения.
habrahabr.ru/company/google/blog/173861

Answer 3

[Grag]

Используйте @media и все.

Answer 4

[Амир Гафуров]

Быть может метод scale вам поможет: www.w3schools.com/css/css3_2dtransforms.asp