动态调整页面大小答案

【问题标题】：Dynamically Resizing the Page动态调整页面大小
【发布时间】：2012-07-21 02:48:38
【问题描述】：

我一直想知道如何使网络上的页面更加流畅和 100% 响应。所以我决定在我的网站代码中添加以下 jQuery 精灵粉。

$(window).resize(function(){
       $("div.content").css({
           minHeight : $(window).height() * 0.75
       });
});

// just to make sure it happens
$(function(){
       $(window).trigger("resize");
});

这是个好主意吗？这里需要一些 HTML5 专家。

【问题讨论】：

为什么你必须使用 jQuery 而不是 css 来实现这一点？这可以通过媒体查询来完成。
为什么要设置页面的高度而不是宽度？有什么特别的原因吗？
@Zoltan_Toth：好吧，我这里只包括高度是为了演示。
@chrisjlee：我在这里使用了 jQuery 和 CSS，只是这将处理窗口大小的调整。窗口的高度会改变，但标签的大小不会改变。

标签： jquery html css responsive-design

【解决方案1】：

如果您只想将特定样式应用于某些窗口大小，那么CSS Media Queries 应该这样做。

【讨论】：

不是针对特定的窗口大小，而是在有人取消最大化窗口或调整窗口大小时进行处理。

【解决方案2】：

媒体查询和百分比应该可以解决问题。

请参考我的 jsfiddle 示例：http://jsfiddle.net/qu6Za/

媒体查询使其成为响应式设计，百分比使其在单个媒体查询中流畅。

【讨论】：