javascript - CSS 放大所有元素

Question

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

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

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

Answer 1

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

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

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

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

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

Answer 2

CSS 媒体查询将是最好的解决方案，但由于您不想使用 CSS3，那么您可以使用 JavaScript。像Adapt.js这样的东西应该可以解决问题。