javascript - CSS 升级所有元素

Question

我有一个与元素关联的 CSS 文件，其中所有元素大小和偏移(例如图像和字体)均使用 px 值定义。这些 px 值基于具有固定屏幕分辨率 960x540 的目标平台。

我想为使用 1280x720 分辨率的不同平台放大所有这些值，我正在寻找一种工具来实现这一点。所涉及的平台没有太多的 CPU 能力，它们并不都支持相同程度的 CSS3 功能，所以我宁愿避免在应用程序的运行时尝试这样做。

我没有在 Google 上找到任何东西，所以有人知道可以完成这项工作的在线工具吗？

Answer 1

它现在可能不是很有用..但为了避免将来出现此类问题，我建议您不要编写显式 css，而是使用像 lesscss 这样的工具.

好处是，您可以定义全局变量等，因此您只需在文件顶部指定屏幕宽度和高度，然后使用这些变量计算其他元素的比例。
例如:

@w: 1280px;
@h: 720px;

#some_div {
    width: @w / 2;
    height: @h / 2;
}

当您完成编写后，一个 js 工具会将 lesscss 文件编译成有效的 css，然后您可以将其用于您的应用程序。
因此，当您需要再次更改分辨率时，只需更改两个变量 @w 和 @h 并再次编译 css。