[CSS/JavaScript] 반응형 웹 media query, matchMedia()

 

css

media query

: 화면의 종류와 크기에 따라 디자인을 적용할 수 있는 반응형 디자인의 핵심 기술!!

/*화면의 크기가 760px 이상일때 적용 할 스타일*/
@media (min-width: 760px) {
  .slideshow{
    height: 550px;
    width: 380px;
    	}
    }

 

JavaScript

matchMedia()

: 자바스크립트에서 css의 media query같이 사용할수 있는 함수

matchMedia() 의 인수로 css의 media query문법이 들어감!

  //화면의 크기가 760px 이상일때 적용 할 코드
  if (matchMedia("screen and (min-width: 760px)").matches) {
  }

 

 

 

 

참고
https://blog.outsider.ne.kr/1153

JavaScript에 미디어쿼리를 사용하는 matchMedia() :: Outsider's Dev Story