html - 如何使屏幕按窗口大小排列

Question

我正在做一个项目。我有一个带有两个水平 DIV 的屏幕。要求是当窗口大小超过 800px 时，两个 div 都将可见。如果低于 800px，则只有 1 个 div 可见。怎么做？

Answer 1

使用 CSS 使用媒体查询，其中 hdiv1 和 hdiv2 是 DIV Id。

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

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

#hdiv1 {
    display: none;
    }
}

Answer 2

它可能可以使用 jQuery 来完成。

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

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

}

或者您可以添加/删除用于显示的 css 从隐藏到可见。

Answer 3

在 CSS3 中结合使用媒体查询和 display:none 属性。

检查这个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;
    }
}