停止 jquery 对于不同的屏幕尺寸

Stop jquery for different screen size.

本文关键字：屏幕 于不同 jquery 停止      更新时间：2023-09-26

我有这个代码：

<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>

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

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

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

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

背景：

我的侧边栏

是页面右侧的固定侧边栏，为 300px。我在侧边栏（#content 右）和主要部分（#content 左）之间有一个 20px 的填充。我的主要部分（左 #content）使用上面的脚本 100% - 320px。

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

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

谢谢。:)

使用一个简单的 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();
});

你可以像这样组合它们。 这仅在窗口不小于 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');
    });
  }
});
相关文章：