響應jquery更改寬度

我正在學習響應desing我認爲這對於簡單的webs和easyfull很容易，所以我嘗試重新生成我的web以響應。當我的網站開始時，我改變了javascript的寬度以產生效果。響應jquery更改寬度

嗯我的問題是，當我改變寬度與JavaScript我的響應式css不工作。

例如，當我做的：

$(document).ready(function() { 
    $('#content').width(800); 
}

我的CSS does not工作：

/* Media Queries */ 
@media screen and (max-width: 480px) { 

#content 
{ 
    /*height: 450px;*/ 
    width: 100%; 
    background-color: rgba(0,0,0, .1); 
    position: relative; 
    margin:20px auto; 
    z-index: 0; 
    left: -10px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 10px; 
    color: rgb(90, 90, 90); 


    transition-timing-function: cubic-bezier(0.42,0,1,1); 
    -moz-transition-timing-function: cubic-bezier(0.42,0,1,1); 
    -webkit-transition-timing-function: cubic-bezier(0.42,0,1,1); 
    -o-transition-timing-function: cubic-bezier(0.42,0,1,1); 

    transition:width 2s; 
    -moz-transition:width 2s; /* Firefox 4 */ 
    -webkit-transition:width 2s; /* Safari and Chrome */ 
    -o-transition:width 2s; /* Opera */ 

}

我該怎麼解決呢？

來源

2013-03-30 ƒernando Valle

您的媒體查詢正在查看您的瀏覽器的窗口寬度，而不是div的寬度。所以你必須調整你的瀏覽器窗口（這在現代瀏覽器中是不可能的）。

來源

2013-03-30 19:15:57

我不太瞭解它，如果我將瀏覽器的窗口更改爲480，爲什麼不將大小設置爲div的100％？它不像「窗口寬度監聽器」一樣工作？ –

media screen是屏幕寬度的條件，如果screen width > max-width css不起作用。

max-width:480px; /* is for Smartphones (portrait and landscape) */

和

max-width:1224px; /* is for Desktops and laptops. */

這裏是jsFiddle預覽。

來源

2013-03-30 19:29:56 mehdi

是的，但是當我運行我的例子時，它設置了正確的CSS，但寬度不更新。例如，在每種CSS類型（480和800）中都有不同的背景顏色，並且已應用但不是寬度：S –

響應jquery更改寬度

回答

相關問題