개인적인 정리

미디어 쿼리 기본 분기 본문

HTML & CSS

미디어 쿼리 기본 분기

yeon.Biju 2016. 12. 5. 16:51

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

}



아래 출처에서 보고  기본적으로 사용하고 있는 기본 분기.

때때로 다르게 사용하기도 하지만 현재 기준점으로 삼고 있는 분기 타입


출처 : http://naradesign.net/wp/2012/05/30/1823/

Comments