Автоматическая настройка css в зависимости от процента - PullRequest
0 голосов
/ 18 июня 2020

Я создаю онлайн-редактор, который позволяет пользователю изменять размер холста.

В настоящее время я использую Jquery функцию изменения размера окна, чтобы определить, когда пользователь изменяет размер холста, а затем позвольте Jquery вычислить процент уменьшения ( Изменение размера высоты / исходной высоты страницы).

Затем я изменяю размер таких свойств, как (padding, font-size, top, left ...), и помещаю их как встроенные тексты.

Например, Original div :

<div style="font-size: 22px; width: 290px; left: 36px; bottom: 16px; position:absolute"> Text </div>

Если пользователь уменьшает окно до 50% от исходного размера, оно меняется на

<div style="font-size: 11px; width: 145px; left: 18px; bottom: 8px; position:absolute"> Text </div>

Работает нормально (несмотря на некоторые незначительные jquery вычисления, плавающие). Однако, когда пользователь нажимает кнопку рендеринга, я позволяю jquery получить текущие свойства встроенного стиля и отправить их на сервер рендеринга.

Проблема в том, что я не могу вернуть элементы к их исходному размеру на стороне сервера ( У меня есть процент умножения) Мой бэкэнд рендеринга работает на PHP, и я также публикую процентное соотношение, чтобы вернуться к исходному размеру.

Отправленный параметр сохраняется в переменной $ css, и это примерно так

font-size: 11px; width: 145px; left: 18px; bottom: 8px; position:absolute

Как я могу изменить эту версию с измененным размером и увеличить ее на 200%?

font-size: 22px; width: 290px; left: 36px; bottom: 16px; position:absolute

Либо на стороне php, либо на стороне jquery перед публикацией подойдет!

Заранее спасибо.

1 Ответ

0 голосов
/ 18 июня 2020
font-size: 2vw; width: 21.3vw; left: 3vw; bottom: 3vw; position: absolute;

Пожалуйста, попробуйте это css. это css будет автоматически установлено по ширине окна.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...