미디어 쿼리 코드 템플릿

모든 해상도를 대응 하기 위한 미디어 쿼리 코드 템플릿

 : All, Mobile, Tablet, Desktop 으로 기기별 대응 코드를 분류

 : Liquid(유동폭) 레이아웃 기법을 사용하면 사실상 모든 해상도 대응 가능

/* All Device */

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

/* Mobile Device */

760px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 

모든 해상도에서 이 코드가 실행된다.  

미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet & 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 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다. 

}