Google 뉴스와 같은 확대/축소 이벤트

Question

확대/축소 동작을 Google News과 같이해야합니다. 우리가 두 번 세 번 확대하면 왼쪽 사이드 바가 숨겨집니다. 어떻게 할 수 있니? 내가 아는 것은 먼저 줌 이벤트를 감지해야한다는 것입니다. 내가 SO를 검색하고 검색도 했으므로 HTML-DOM에 직접 확대/축소 이벤트가 없다는 것을 알게되었습니다.

1. 우리가 확대 또는 축소 할 때 두 번 실행됩니다 onresize 이벤트를 사용 : 처럼 그렇게 할 수있는 몇 가지 방법이 있습니다. 그러나 이제 우리는 어떻게 그것이 확대되거나 축소되는지 감지 할 수 있습니다. 한 가지 방법은 onresize 이벤트 전후의 모든 요소의 차원을 비교하는 것입니다. 하지만 거기에는 다른 것이 있습니다.

Google 뉴스에서 구현하는 방법을 찾으려고했지만별로 승리하지 못했습니다. 당신을 도와주세요 ~

Answer 1

CSS에서 @media 쿼리를 사용할 수 있습니다. 예를 들어, 브라우저 width이 1024 인 경우 하나의 컨텐츠를 표시하지만 컨텐츠가 적 으면 표시하지 않습니다. 이 코드는 다음과 같습니다.

@media (max-width: 500px) { 
    .left-sidebar { 
     display: none; 
    } 
} 
@media (min-width: 500px) { 
    .left-sidebar { 
     display: block; 
    } 
} 

IE 7 및 IE 8에서는 아직 지원되지 않습니다! 이 경우 트리거하려면 JavaScript 또는 jQuery를 사용해야합니다. 그것을 밖으로 시도하십시오. :) 희망이 도움이! :)

여기에서 기본 예제를 확인하십시오 Media Query Demo. 브라우저 너비의 크기를 조정하고 하단 부분을 확인하십시오.

이의 CSS는 다음과 같습니다

@media only screen and (min-width: 320px) { 
    body:after { 
     content: "320 to 480px"; 
     background-color: hsla(90,60%,40%,0.7); 
    } 
} 
@media only screen and (min-width: 480px) { 
    body:after { 
     content: "480 to 768px"; 
     background-color: hsla(180,60%,40%,0.7); 
    } 
} 
@media only screen and (min-width: 768px) { 
    body:after { 
     content: "768 to 1024px"; 
     background-color: hsla(270,60%,40%,0.7); 
    } 
} 
@media only screen and (min-width: 1024px) { 
    body:after { 
     content: "1024 and up"; 
     background-color: hsla(360,60%,40%,0.7); 
    } 
}