자바스크립트 반응형웹 설정하기

특정 매체 디바이스 크기일 경우 레이아웃이 변경되는 반응형웹을 사용할 수 있습니다.

var 변수 = window.matchMedia('screen and (max-width:기준크기값)');

또는 if문을 이용하여 조건문 위치에 곧바로 matchMedia 메서드를 이용하여 조건을 작성할 수 있습니다.

if (window.matchMedia("(min-width: 400px)").matches) {
  /* 뷰포트 너비가 400 픽셀 이상 */
} else {
  /* 뷰포트 너비가 400 픽셀 미만 */
}

참과 거짓에 따른 결과 값 위치에 서로 다른 값을 가진 메서드를 작성하여 화면 크기에 따라 어떤 결과가 나오는지 확인해봅시다. 

 

반응형웹은 단순 조건 설계만 하는 스크립트로 조건이 만족되었을 경우 실행 값은 제작자의 기획의도에 따라 다양한 속성과 메서드로 표현될 수 있습니다.

 

See the Pen Untitled by yuna122212 (@yuna122212) on CodePen.