下面是一个使用jQuery、javascript和css来处理大小调整事件的例子。 (css如果你最好的选择，如果你只是在调整大小(媒体查询)) http://jsfiddle.net/CoryDanielson/LAF4G/

css

.footer 
{
    /* default styles applied first */
}

@media screen and (min-height: 820px) /* height >= 820 px */
{
    .footer {
        position: absolute;
        bottom: 3px;
        left: 0px;
        /* more styles */
    }
}

javascript

window.onresize = function() {
    if (window.innerHeight >= 820) { /* ... */ }
    if (window.innerWidth <= 1280) {  /* ... */ }
}

jQuery

$(window).on('resize', function(){
    var win = $(this); //this = window
    if (win.height() >= 820) { /* ... */ }
    if (win.width() >= 1280) { /* ... */ }
});

我如何阻止我的调整大小代码执行如此频繁!?

这是绑定调整大小时注意到的第一个问题。当用户手动调整浏览器大小时，调整大小的代码被称为LOT，并且会感觉非常笨拙。

要限制调用调整大小代码的频率，可以使用下划线和lodash库中的debounce或throttle方法。

debounce will only execute your resize code X number of milliseconds after the LAST resize event. This is ideal when you only want to call your resize code once, after the user is done resizing the browser. It's good for updating graphs, charts and layouts that may be expensive to update every single resize event. throttle will only execute your resize code every X number of milliseconds. It "throttles" how often the code is called. This isn't used as often with resize events, but it's worth being aware of.

如果你没有下划线或lodash，你可以自己实现一个类似的解决方案: JQuery JavaScript /: $(窗口)。调整大小完成后如何发射?

您可以使用.resize()绑定调整大小，并在浏览器调整大小时运行您的代码。您还需要添加一个else条件到您的if语句，以便您的css值切换旧的和新的，而不仅仅是设置新的。

给你的匿名函数一个名字，然后:

$(window).on("resize", doResize);

http://api.jquery.com/category/events/

用这个:

window.onresize = function(event) {
    ...
}

试试这个解决方案。仅在页面加载时触发，然后在窗口调整大小期间在预定义的resize delay触发。

$(document).ready(function()
{   
   var resizeDelay = 200;
   var doResize = true;
   var resizer = function () {
      if (doResize) {

        //your code that needs to be executed goes here

        doResize = false;
      }
    };
    var resizerInterval = setInterval(resizer, resizeDelay);
    resizer();

    $(window).resize(function() {
      doResize = true;
    });
});

function myResizeFunction() {
  ...
}

$(function() {
  $(window).resize(myResizeFunction).trigger('resize');
});

这将导致调整大小处理程序在窗口调整大小和文档准备就绪时触发。当然，如果你想让.trigger('resize')在页面加载时运行，你可以将你的resize处理程序附加到文档就绪处理程序之外。

更新:如果您不想使用任何其他第三方库，这里有另一个选择。

该技术将一个特定的类添加到目标元素中，这样您就可以仅通过CSS控制样式(并避免内联样式)。

它还确保只在触发实际阈值点时添加或删除类，而不是在每次调整大小时添加或删除类。它只会在一个阈值点触发:当高度从<= 818变化到> 819时，反之亦然，并且不会在每个区域内多次触发。它与宽度的变化无关。

function myResizeFunction() {
  var $window = $(this),
      height = Math.ceil($window.height()),
      previousHeight = $window.data('previousHeight');

  if (height !== previousHeight) {
    if (height < 819)
      previousHeight >= 819 && $('.footer').removeClass('hgte819');
    else if (!previousHeight || previousHeight < 819)
      $('.footer').addClass('hgte819');

    $window.data('previousHeight', height);
  }
}

$(function() {
  $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});

例如，你可能有以下一些CSS规则:

.footer {
  bottom: auto;
  left: auto;
  position: static;
}

.footer.hgte819 {
  bottom: 3px;
  left: 0;
  position: absolute;
}