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}

我需要在将屏幕更改为900px或低于900px时，将此代码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%");
    }
    });

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

2 个答案: