根据百分比自动调整css

Question

我正在构建一个允许用户调整画布大小的在线编辑器。

我正在使用当前使用 Jquery 窗口调整大小功能来检测用户何时调整画布大小然后让 Jquery 计算缩小百分比（调整后的高度/原始页面高度）。

然后我调整属性的大小，例如 (padding, font-size, top, left ...) 并将它们作为内联文本。

例如原始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 上执行，我还发布了比率百分比以恢复到原始大小。

posted 参数存储在变量 $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 端都可以完成这项工作！

提前致谢。

Answer 1

font-size: 2vw; width: 21.3vw; left: 3vw; bottom: 3vw; position: absolute;

请试试这个 CSS。这个 CSS 会自动设置在窗口宽度上。