jquery - 使用 Jquery 根据屏幕大小更改 Div 的大小

Question

我的 jquery 有什么问题？我想根据屏幕大小使我的 div 更大，并且有很多很好的例子，但仍然没有成功。

  var screenWidth = screen.width;
  if (screenWidth < 1024) {

      $(".gadgetblockLeft1").css("width","40%");
  }  else {
        $(".gadgetblockLeft1").css("width","100%");
  }

和CSS仍然： -

.gadget .gadgetblockLeft1 { padding:5px; background-color:#f4f4f4; border:1px solid #cfcfcf; font-family:Tahoma, Geneva, sans-serif; font-size:12px; text-align:right; direction:rtl; margin-left:5px; height:auto; float:left}

我需要将屏幕更改为 900 像素或小于 900 像素时，它将将此代码添加width:100%到类中.gadgetblockLeft1

Answer 1

您可能想要使用媒体查询：

.gadgetblockLeft1 { width: 40%; }
@media (min-width: 1024px) { .gadgetblockLeft1 { width: 100%; } }

这种方法的优点是当屏幕宽度发生变化时，它会自动做正确的事情，例如调整窗口大小。

Answer 2

尝试这个：

 $(window).resize(function() {         
    if ($(window).width() <= 900) {
       $(".gadget .gadgetblockLeft1").css("width","100%");
    }
    });