Java Script : 자바스크립트로 미디어 쿼리, 창 크기 확인 : 예제, 구현

Java Script : 자바스크립트로 미디어 쿼리, 창 크기 확인 : 예제, 구현

 

웹이 너무나 다양한 장치에서 사용되고 있으므로 다양한 화면 크기에 맞게 디자인을 변경할 수 있어야합니다. 

화면 크기에 따라 디스플레이를 변경하는 가장 좋은 방법은 미디어 쿼리를 사용하여 화면의 크기 뷰포트를 찾고 사용중인 화면 크기에 따라 디자인을 변경하는 것입니다. 

미디어 쿼리 중단 점을 정의하여 이와 같은 다른 장치의 디자인을 변경할 수 있으므로 주로 CSS 파일에서 이러한 변경을 수행합니다.

 

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {

}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {

}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {

}

 

위의 코드를 사용하면 다른 장치에서 스타일을 완전히 다르게 만들 수 있지만 화면 크기에 따라 사이트의 기능을 변경하려면 어떻게 해야 하는 지 알아보겠습니다.

슬라이드 다운 탐색 단추를 만드는 등의 다른 화면 크기에서 일부 Javascript 코드를 사용해야하는 경우 미디어 쿼리는 장치의 크기를 확인하기 위해 창의 너비를 확인합니다.

창 개체에서 .width ()와 같은 메서드를 사용할 수 있다고 생각합니다.

 

if($(window).width() < 767)
{
   // change functionality for smaller screens
} else {
   // change functionality for larger screens
}

 

그러나 이것은 창의 패딩 및 스크롤 막대와 같은 것을 적용하기 때문에 창의 실제 값을 반환하지 않습니다. 

미디어 크기를 확인할 때 사용할 수 있는 다른 옵션은 창 객체에서 .matchMedia ()의 Javascript 메서드를 사용하는 것입니다.

 

var window_size = window.matchMedia('(max-width: 768px)'));

 

 

이것은 미디어 쿼리와 같은 방식으로 작동하며 IE9 이하를 제외한 많은 브라우저에서 지원됩니다. 

window.matchMedia를 사용할 수 있습니다.

matchMedia를 사용하려면 미디어 쿼리와 같이 확인하려는 최소 또는 최대 값을 전달하고 뷰포트가 이 값과 일치하는지 확인해야합니다.

 

if (window.matchMedia('(max-width: 768px)').matches)
{
    // do functionality on screens smaller than 768px
}

 

이제 이것을 사용하여 768px보다 작은 화면의 하위 메뉴에 클릭 이벤트를 추가 할 수 있습니다. 

아래 코드는 768px보다 작은 화면에서만 실행될 자바 스크립트 코드를 추가하는 방법의 예입니다.

 

if (window.matchMedia('(max-width: 768px)').matches)
{
    $('.sub-menu-button').on('click', function(e)
    {
        var subMenu = $(this).next('.sub-navigation');
        if(subMenu.is(':visible'))
        {
            subMenu.slideUp();
        } else {
            subMenu.slideDown();
        }

        return false;
    });
}