響應式CSS - 兩組大小？

Question

我希望有人可以闡明我將如何做到這一點在jQuery，CSS等。

我有一個網站的寬度爲900像素。但是，如果用戶在這裏擴展窗口的寬度爲1140像素或更多，我希望網站的寬度爲1440像素。之間沒有什麼，因爲我使用jQuery quicksand插件，我希望一切都完美適合。

Answer 1

我會用媒體查詢，你可以find info here。他們很漂亮。

Answer 2

如果你只是想使用jQuery和CSS來做到這一點，你可以嘗試以下（這是令人難以置信的簡單，而不是最好的辦法，但滿足您的要求）

$(document).ready(function(){ 
    $(window).resize(function(){ 
    if($(window).width() >= '1440'){ 
     $("#wrapper").css('width','1440px'); 
    } else { 
     $("#wrapper").css('width','900px'); 
    } 
    }); 
}); 

另外，您也可以通過嵌套你的CSS試試這個，這將使其更容易改變佈局的其他方面：

CSS

#wrapper_small { width: 900px; } 
#wrapper_large { width: 1440px; } 

jQuery的

$(document).ready(function(){ 
    $(window).resize(function(){ 
    if($(window).width() >= '1440'){ 
     $("#wrapper_small").attr('id','wrapper_large'); 
    } else { 
     $("#wrapper_large").attr('id','wrapper_small'); 
    } 
    }); 
}); 

Answer 3

媒體查詢確實是要走的路;由於沒有鏈接或代碼示例，這樣的事情應該讓你開始，在你的CSS：

#someSelector {width:900px;}//all the css here for less than 1140px 

@media all and (min-width:1139px) {//css here for 1140 and up 
    #someSelector {width:1140px;} 
} 

Answer 4

通過把這樣的事情在你的CSS創建一個媒體查詢：

@media screen and (min-width:1400px;) 

{ 
    #div { 
    max-width:1440px; 
    width:100%; 
    } 
}