基于Jquery的屏幕尺寸更改Div的大小

问题描述：

我的jQuery中出现了什么问题？我想根据屏幕尺寸使我的div更大，并且有很多很好的例子，但仍然没有成功。基于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

将if（screenWidth 900）'？ – JAM 2013-05-12 16:10:32

您应该为此使用媒体查询，而不是JS。请参阅@ torazaburo的回答，除此之外，您似乎还不确定代码会发生什么情况。 jQuery不会将您的更改附加到类本身，而是附加到您定义的选择器的元素。 – Lea 2013-09-01 19:24:11

答

试试这个：

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

谢谢你帮助我，但它仍然没有工作 – 2013-05-12 16:28:33

试试这个比，如果它不会工作我不知道你的意思。 – user2336174 2013-05-12 16:52:48

答

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

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

这种方法的优点是，当屏幕宽度发生变化时，例如由于调整窗口大小，它会自动执行正确的操作。

谢谢你帮助我，但它仍然不起作用 – 2013-05-12 16:33:33

它是如何工作的？请记住，如果CSS中有'position'属性设置了中介元素，'width'属性将被解释为与元素的“布局父元素”相关，该元素可能不是页面的主体。我们需要查看更多的代码才能了解发生了什么。 – 2013-05-13 03:12:40

基于Jquery的屏幕尺寸更改Div的大小

相关推荐