Media Query의 기본 사용법
페이지 정보
본문
PC를 기준으로 ..
max-width 를 사용한다. ( 최대 ~ 까지 적용 )
순서 : PC => 태블릿 => 모바일
미디어 쿼리를 사용하지 않고 기본 CSS 작업한 CSS는 1199px보다 큰 화면
즉, 1200px부터 적용이 된다.
/* 세로모드 모바일 디바이스 ( 해상도가 576px 보다 작은 화면 ) */
@media (max-width:575px) { ...실행코드 }
/* 가로모드 모바일 디바이스 ( 해상도가 768px 보다 작은 화면 ) */
@media (max-width: 767px) { ...실행코드 }
/* 태블릿 디바이스 ( 해상도가 992px 보다 작은 화면 ) */
@media (max-width: 991px) { ...실행코드 }
/* 데스크탑 ( 해상도가 1200px 보다 작은 화면 ) */
@media (max-width: 1199px) { ...실행코드 } Mobile을 기준으로 ..
min-width 를 사용한다. ( 최소 ~ 부터 적용 )
순서 : 모바일 => 태블릿 => PC
미디어 쿼리를 사용하지 않고 기본 CSS 작업한 CSS는 576px보다 작은 화면
즉, 0 ~ 575px까지 적용이 된다.
/* 세로모드 모바일 디바이스 ( 해상도가 576px 보다 큰 화면 ) */
@media (min-width:576px) { ...실행코드 }
/* 가로모드 모바일 디바이스 ( 해상도가 768px 보다 큰 화면 ) */
@media (min-width: 768px) { ...실행코드 }
/* 태블릿 디바이스 ( 해상도가 992px 보다 큰 화면 ) */
@media (min-width: 992px) { ...실행코드 }
/* 데스크탑 ( 해상도가 1200px 보다 큰 화면 ) */
@media (min-width: 1200px) { ...실행코드 }Break Point
브레이크 포인트의 분기는 사이트 구축 상황에 맞게 선택하면 된다.
/* 가로 해상도가 576px 보다 작은 화면에 적용 */
@media only screen and (max-width: 576px) { ...실행코드 }
/* 가로 해상도가 576px부터 모든 스크린을 적용 */
@media only screen and (min-width: 576px) { ...실행코드 }
/* 가로 해상도가 768px부터 모든 스크린을 적용 */
@media only screen and (min-width: 768px) { ...실행코드 }
/* 가로 해상도가 992px부터 모든 스크린을 적용 */
@media only screen and (min-width: 992px) { ...실행코드 }
/* 가로 해상도가 1200px부터 모든 스크린을 적용 */
@media only screen and (min-width: 1200px) { ...실행코드 }
/* 세로모드 모바일 디바이스 ( 해상도가 576px 보다 작은 화면 ) */
@media (max-width: 575px) { ...실행코드 }
/* 가로모드 모바일 디바이스 ( 해상도가 576px보다 크고 768px 보다 작은 화면에 적용 ) */
@media (min-width: 576px) and (max-width: 767px) { ...실행코드 }
/* 태블릿 디바이스 ( 해상도가 768px보다 크고 991px 보다 작은 화면에 적용 ) */
@media (min-width: 768px) and (max-width: 991px) { ...실행코드 }
/* 데스크탑 ( 해상도가 992px보다 크고 1199px 보다 작은 화면에 적용 ) */
@media (min-width: 992px) and (max-width: 1199px) { ...실행코드 }
/* 큰화면 데스크탑 ( 해상도가 1200px 보다 큰 화면에 적용 ) */
@media (min-width: 1200px) {...} 추천 0 비추천 0
- 이전글 px | em | rem 차이 23.02.20
- 다음글 Display와 Visibility 의 차이점 및 속성 23.02.15