[JS] 반응형 코드 만들기

JS 썸네일

JS 반응형 코드 만들기

요즘은 반응형으로 홈페이지를 만든다.

 

반응형 페이지란

페이지 하나로 화면 사이즈에 따라 다르게 보여주는 표현해주는 기술입니다.

사용자가 보기 편리하게 만드는 페이지입니다. 

 

반응형 사이즈들

사용법

//기준 설정 
var windowWidth = window.matchMedia("screen and (max-width: 768px)");

if (windowWidth.matches) {
    //screen and (max-width: 768px)에 해당한다.
    alert('모바일 사이즈 입니다.')
} else {
    //screen and (max-width: 768px)에 해당하지 않는다.
    alert('모바일 사이즈가 아닙니다.')
}

변수하나를 설정하여 기준을 저장해 놓는다.

변수를 기준으로 기준 사이즈에 해당하는지 안하는지를

if문을 사용하여 구분한다.

 

함께 볼만한 자료

예전에 올렸던 반응형 css설정하는것을 참고하면 코드를 만들 때 도움이 된다.

 

 

2021.04.01 - [웹언어/CSS] - [CSS] @media 쿼리 / 반응형 만들기

[CSS] @media 쿼리 / 반응형 만들기