2013-05-12 142 views
0

我的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

+0

將if(screenWidth <1024)更改爲if(screenWidth> 900)'? – JAM 2013-05-12 16:10:32

+0

您應該爲此使用媒體查詢,而不是JS。請參閱@ torazaburo的回答,除此之外,您似乎還不確定代碼會發生什麼情況。 jQuery不會將您的更改附加到類本身,而是附加到您定義的選擇器的元素。 – Lea 2013-09-01 19:24:11

回答

0

試試這個:

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

謝謝你幫助我,但它仍然沒有工作 – 2013-05-12 16:28:33

+0

試試這個比,如果它不會工作我不知道你的意思。 – user2336174 2013-05-12 16:52:48

1

您可能想要使用媒體查詢:

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

這種方法的優點是,當屏幕寬度發生變化時,例如由於調整窗口大小,它會自動執行正確的操作。

+0

謝謝你幫助我,但它仍然不起作用 – 2013-05-12 16:33:33

+0

它是如何工作的?請記住,如果CSS中有'position'屬性設置了中介元素,'width'屬性將被解釋爲與元素的「佈局父元素」相關,該元素可能不是頁面的主體。我們需要查看更多的代碼才能瞭解發生了什麼。 – 2013-05-13 03:12:40