Question

如果我的屏幕宽度小于960像素，我怎么能让jquery做一些事情我想要触发宽度（） - 140，如果屏幕大于960px它应该改变宽度（） - 340.如果有任何其他解决方案实现这总是受欢迎的。

function resize() { 
  if ($(window).width() < 960) { 
    $(".test").css({
      width: $(window).width() - 140, 
      height: $(window).height() - 140,
    }); 
  }
    else () { 
      $(".test").css({
        width: $(window).width() - 340, 
        height: $(window).height() - 40,
      }); 
    }  
  resize(); 
  $(window).resize(function(){ resize(); });

.test {
    background: green;
    padding: 20px;
}

<div class="test"></div>

Answer 1

如果你真的需要使用jQuery来定位某些分辨率，那么应该这样做：

<强> Updated JsFiddle

var mq = window.matchMedia("(min-width:960px)");
mq.addListener(WidthChange);
WidthChange(mq);

function WidthChange(mq) {
  if (mq.matches) {
      $(".test").css({'width':'140px', 'height':'140px'});
  } else {
      $(".test").css({'width':'340px' , 'height':'40px'});
  }
}

.test {
background: green;
padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="test"></div>

否则我建议使用更快的CSS媒体查询：

Updated JsFiddle

.test {
  background: green;
  padding: 20px;
  width: 340px;
  height:40px;
}
@media screen and (max-width: 960px) {
  .test {
    width: 140px;
    height: 140px;
  }
}

<div class="test"></div>

Answer 2

如果你的目标是为不同的窗口宽度做出不同的填充/边距，你应该使用@media代替jssery / javascript代码。

Answer 3

Cou可以使用纯css和media-queries执行此操作：

http://jsfiddle.net/hwgnmmc7/

＆＃13;

.test {
    width: calc( 100% - 140px );
    height: calc( 100% - 140px );
    background: green;
    padding: 20px;
}
@media(min-width:960px) {
    .test {
        width: calc( 100% - 340px );
        height: calc( 100% - 340px )
    }
}

＆＃13;

<div class="test"></div>

＆＃13;

Answer 4

您可以按如下方式简化代码：

  function resize() 
  { 
    var width = $(window).width();

    var offset_w = width + (width > 960 : 340 : 140);
    var offset_h = $(window).height() + (width > 960 : 140 : 40);

      $(".test").css({
        width: offset_w, 
        height: offset_h,
      }); 
  }

屏幕调整大小功能 - Jquery

4 个答案: