11.06

css

미디어 쿼리 코드 템플릿

아래 코드는 모든 해상도를 커버하기 위한 미디어 쿼리 코드 템플릿이다. All, Mobile, Tablet, Desktop 으로 기기별 대응 코드를 분류 했지만 Liquid 레이아웃 기법을 사용하면 사실상 모든 해상도를 커버할 수 있다.

 

---

@charset "utf-8";

 

/* All Device */

모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.

 

/* Mobile Device */

768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

 

/* Tablet & Desktop Device */

@media all and (min-width:768px) {

   사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.

}

 

/* Tablet Device */

@media all and (min-width:768px) and (max-width:1024px) {

   사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨.

   아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.

}

 

/* Desktop Device */

@media all and (min-width:1025px) {

   사용자 해상도가 1025px 이상일 때 이 코드가 실행됨.

   1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.

}

---