0

我目前正在开发一个具有动态布局的网站。每当窗口调整大小时，它会检查（通过 jQuery）哪个布局最适合（我为此设置了几个像素范围）并将 .high .med 或 .low 类应用于页面上的元素。

到目前为止，我已经完成了几乎所有工作。剩下的只有几件事我无法弄清楚。

因为布局严重依赖浮动，所以我使用了“equalheights”jQuery 插件来使列的大小达到相等的高度：

(function($) {
    $.fn.equalHeights = function(minHeight, maxHeight) {
        tallest = (minHeight) ? minHeight : 0;
        this.each(function() {

            if($(this).height() > tallest) {
                tallest = $(this).height();
            }
        });

        if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
        return this.each(function() {
            $(this).height(tallest).css;
        });
    }
})(jQuery);

问题是当布局切换时，列将不断调整大小。这通常不是问题，但布局差异很大。

首先，我尝试在调整大小之前添加一个 if “has class” 语句，但这不起作用，因为脚本在添加时没有“看到”类。这可能与函数的执行顺序有关。

我应该注意，我只是一个初学者（4 周的 javascript/jQuery 经验），但我非常愿意学习更多。

4

1 回答 1

2

我建议您使用 CSS3 媒体查询而不是脚本来进行响应式/自适应网页设计。

请看看这个

这些不会处理很多，因此重量轻，大多数现代浏览器和设备都支持 CSS3，因此是一个方便可靠的选项。

于 2013-02-21T14:40:09.943 回答