如何根據窗口大小安排屏幕

Question

我正在開發一個項目。我有一個有兩個水平DIV的屏幕。要求是，當窗口大小超過800像素時，這兩個div將可見。如果它低於800像素，只有1格可見。怎麼做？

Answer 1

使用媒體查詢和顯示的組合：CSS3中沒有屬性。

入住此的jsfiddle http://jsfiddle.net/XuS4g/

#first,#second{ 
    height:400px; 
    background:red; 
    display:block; 
    float:left; 
} 
#first{ 
    width:70%; 
} 
#second{ 
    width:200px; 
    background:blue; 
} 

@media screen and (max-width:800px){ 
    #second{ 
     display:none; 
    } 
} 

Answer 2

使用媒體查詢使用CSS，其中hdiv1 & hdiv2是DIV的ID。

#hdiv1 { 
    display: block; 
    } 
#hdiv2 { 
    display: block; 
    } 

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

#hdiv1 { 
    display: none; 
    } 
} 

Answer 3

它可以使用jQuery完成。

window.onresize = function(event) { 
if ($(window).width() > 800){ 
    $("YourDiv").show(); 
    $("YourDiv").show(); 
} 

if ($(window).width() < 800){ 
    $("YourDiv").hide(); 
} 

} 

或者您可以添加/刪除顯示從隱藏到可見的css。