Question

我有一个具有多个断点的响应式设计。内容中的一些块维度是使用jQuery计算的。当视口更改这些尺寸时，应该运行计算。当参考元素的维度发生变化时，如何触发这些事件？超过断点时，参考元素会发生变化。

我看过“orientationchange”事件，但它没有我需要的结果。

Answer 1

您提供的细节很少，没有代码，所以我们所能做的就是回答非常普遍。

通常，您安装.resize()事件处理程序，并在包含窗口的每个调整大小时，检查结果维度是否已更改，以便您需要重新计算和修改布局。

$(window).resize(function(e) {
    // check dimensions here to decide if layout needs to be adjusted
});

jQuery mobile支持这样的orientationchange事件，它还为e.orientation或"portrait"提供了"landscape"：

$(window).on( "orientationchange", function(e) {
    // check dimensions here to decide if layout needs to be adjusted
});

除了window对象之外，没有用于观察页面中特定元素的大小更改的DOM事件。相反，您必须观察可能导致给定元素调整大小的任何其他事件，这可能是窗口的大小调整，方向更改或页面中修改页面的其他操作（按下按钮或单击某些内容，例）。然后，当这些其他事件触发并处理完毕后，您可以检查目标元素的大小，看它是否发生了变化。

这是一个jQuery插件，可以去除resize事件，因此只会在尺寸停止变化时告诉你有关调整大小的信息：

(function($) {
    var uniqueCntr = 0;
    $.fn.resized = function (waitTime, fn) {
        if (typeof waitTime === "function") {
            fn = waitTime;
            waitTime = 250;
        }
        var tag = "resizeTimer" + uniqueCntr++;
        this.resize(function () {
            var self = $(this);
            var timer = self.data(tag);
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                self.removeData(tag);
                fn.call(self[0]);
            }, waitTime);
            self.data(tag, timer);
        });
    }
})(jQuery);

工作演示：https://jsfiddle.net/jfriend00/k415qunp/

样本用法：

$(window).resized(function() {
    // put code here to act when window stopped getting resized
});

Answer 2

This page可能会对您有所帮助。他们讨论基于断点的JS执行，并通过跨浏览器支持来实现。基本上，您将使用＆＃34;内容＆＃34;使用隐藏的伪元素。 .myClass的属性：after。

到达断点时触发jQuery

2 个答案: