화면 크기를 조정하는 방법

Question

나는 프로젝트 작업 중입니다. 두 개의 수평 DIV가있는 화면이 있습니다. 요구 사항은 창 크기가 800px 이상일 때 두 div가 모두 표시된다는 것입니다. 800px 미만인 경우 1 개의 div 만 표시됩니다. 어떻게해야합니까?

Answer 1

미디어 쿼리와 디스플레이 조합 : CSS3의 속성 없음.

확인 hdiv1 & hdiv2이 DIV ID가있는이 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 { 
    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(); 
} 

} 

또는 표시/숨김에서 표시로 추가/제거 할 수 있습니다.