Question

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

Answer 1

使用CSS使用媒体查询，其中hdiv1＆amp; hdiv2是DIV Ids。

#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中没有属性。

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

如何按窗口大小排列屏幕

3 个答案: