미디어 쿼리 사용방법

css 파일에 미디어 쿼리를 넣는다.

아이폰의 경우

@media (max-width: 480px) { 

.mobile { max-width: 100%; <–css 코드는 이쪽에}

}

미디어 쿼리는 @media 이런식으로 넣는다.

그러면 480px 이하의 디바이스에서 위의 코드와 같은 css가 실행되게 된다.

. 은 class를 의미하며 *은 id를 의미한다.

예 : <div class=”mobile”> 는 Css에서 .class

예 : <div id=”mobile”> 은 Css에서 #class

요 부분은 자꾸 까먹는 부분이라서 메모!

참고로 각 사이즈 레퍼런스는 다음과 같다

 

 /* Large desktop */
  @media (min-width: 1200px) { ... }

  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) { ... }

  /* Landscape phone to portrait tablet */
  @media (max-width: 767px) { ... }

  /* Landscape phones and down */
  @media (max-width: 480px) { ... }