为不同的屏幕尺寸停止 jquery。答案

【问题标题】：Stop jquery for different screen size.为不同的屏幕尺寸停止 jquery。
【发布时间】：2014-12-11 19:51:12
【问题描述】：

我有这个代码：

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function(){
$('#content-left').css('width', '100%').css('width', '-=320px');
$(window).on('resize', function(){
$('#content-left').css('width', '100%').css('width', '-=320px');
});
});
//]]>  
</script>

上面的代码效果很好，但我需要的是当屏幕尺寸为 768 像素或更小时，此代码停止工作或切换回 100% 宽度（不减去 320 像素）。

我做了一些谷歌搜索，发现了这个：

if ($(window).width() <= 768){  
        // do something here
    }

但我不确定如何将其添加到我现有的代码中。

背景：

我的侧边栏是页面右侧的固定侧边栏，大小为 300 像素。我在侧边栏（#content-right）和主要部分（#content-left）之间有 20px 的填充。我的主要部分（#content-left）正在使用上述 100% - 320px 的脚本。

我正在使用两个 CSS。一种是常规的 CSS。其他用途：

@media all and (max-width: 768px) {}

谢谢。 :)

【问题讨论】：

您是否仅限于使用 JavaScript 或者您愿意接受 CSS 解决方案？
我尝试在 CSS 中使用 width: calc (100% - 320px)。但我注意到浏览器兼容性问题。所以我找到了问题中提到的 JavaScript。但我愿意接受任何解决方案。
当心：stackoverflow.com/questions/11309859/… 实际上你应该使用window.matchMedia 也可以看到这个答案：stackoverflow.com/a/23243951/1414562

标签： javascript jquery html css

【解决方案1】：

使用简单的if/else 语句，将调整大小的代码放在一个函数中，并在页面加载和窗口大小调整时调用该函数。

function resize() {
  if ($(window).width() <= 768) {
    $('#content-left').css('width', '100%');
  } else {
    $('#content-left').css('width', '100%').css('width', '-=320px');

  }
}

$(window).load(function() {
  resize();
});
$(window).on('resize', function() {
  resize();
});

【讨论】：

我对 stackoverflow 很陌生。泰勒先生，我该怎么做？谢谢。
完成。非常感谢您的所有帮助。 :)
@SomeDude - 不客气！ :)

【解决方案2】：

你可以像这样组合它们。这仅在窗口不小于 769 像素时运行您的代码。这就是“！”符号会，将其转换为 NOT。

$(window).load(function() {
  if (!$(window).width() <= 768) {
    $('#content-left').css('width', '100%').css('width', '-=320px');
    $(window).on('resize', function() {
      $('#content-left').css('width', '100%').css('width', '-=320px');
    });
  }
});

【讨论】：

感谢您的帮助，但我无法使用此代码使其工作。 :(