使用 jquery 缩放/缩放网站内容以适应浏览器区域

Question

我编写了一个用 php 编写的小型网站，其宽度固定为 869 像素，以便在每个屏幕上正确显示。我也想把它整合到其他不同宽度的页面上，有时比原来的尺寸更宽。

我尝试了一些解决方案，但它们似乎都不能跨浏览器工作，或者不能缩放包装器中的内容。我也在尝试使用 viewport 属性，但没有成功。

我正在寻找一些跨浏览器的 jquery 脚本，它使用浏览器的缩放效果来使内容适合浏览区域。我在主体中有一个名为 wrapper 的 div，我想缩放它和其中的内容，就像我在浏览器中使用 CTRL + 键一样。

Answer 1

您可以使用 Bootstrap 来扩展您的内容 (http://twitter.github.com/bootstrap/)。如果您还想调整字体大小，您可以使用 LESS 构建或使用纯 javascript（例如使用 JQuery）。

你可以把你的页面包装成一个

<div class="container-fluid">
</div>

在各种标准分辨率下自动缩放。您可以通过覆盖 bootstrap.min.css 来调整宽度。可以在此处找到有关如何启用响应式功能的指南：http://twitter.github.com/bootstrap/scaffolding.html#responsive

您可以添加 row-fluid 类 div 并使用 span 类来对齐您的内容。更多关于如何使用网格系统的信息：http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

为了 LESS，我可以推荐他们的主页：http://lesscss.org/

这是一篇较旧的 StackOverflow 帖子，说明了如何从 JavaScript 插入变量：variable manipulation in Less

也许使用 LESS 已经足够满足您的需求了。