javascript - 停止不同屏幕尺寸的 jquery。

Question

我有这个代码:

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

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

---

背景:

我的侧边栏是页面右侧300px的固定侧边栏。我在边栏 (#content-right) 和主要部分 (#content-left) 之间有 20px 的填充。我的主要部分 (#content-left) 使用的是上述 100% - 320px 的脚本。

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

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

谢谢。 :)

Answer 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();
});