Kudos
Collect
Twiiter
Facebook
Share
Develop somethings, meditation, reading and thinking...

JavaScript 에서 responsive 구현하기

Last updated over 5 years ago
2 0 0 0

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

Hi, my name is Richard. I’m a developer wants to make the world better with logic power. Mainly I use Linux, Nginx, MySQL, PHP and JavaScript . I want to share my knowledge with someone that it was also based from some great persons via LYNMP. 👨‍💻

Essedrop - Make your file online instantly
 

Responses

Leave a response to @richard

Please sign in to comment.
Markdown is also available in comment.