JavaScript 에서 responsive 구현하기

CSS 만으로 모든 responsive 를 구현하기 어려울 정도로 페이지가 복잡할때가 있다. 예를들어 화면 사이즈가 변할때 HTML 위치를 실제로 변경해야 하는 경우 - PC화면에서 왼쪽 사이드바에 있던 메뉴를 모바일 화면에서 오른쪽 본문의 밑으로 위치시켜야 하는 등 - 가 있는데, 이같은 경우에 JavaScript 를 이용하면 편리하다.

JavaScript 로 responsive 를 구현하는 코드

function detectMediaSize() { 
    if ( window.matchMedia('(min-width: 0px) and (max-width: 414px)').matches ) {
        // console.log('Mobile');
    } else if ( window.matchMedia('(min-width: 0px) and (max-width: 768px)').matches ) {
        // console.log('Tablet');
    } else {
        // console.log('PC');
    }
};

// Register
window.addEventListener('resize', detectMediaSize, false);

// Initialization
detectMediaSize();    

참조

https://stackoverflow.com/questions/641857/javascript-window-resize-event