Media Query의 기본 사용법 > 자료실

자료실

자료실

Media Query의 기본 사용법

페이지 정보

profile_image
작성자 최고관리자
댓글 0 조회 1,056회 작성일 23-02-18 08:41
작성일 23-02-18 08:41

본문

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

  • 회사 :
  • 대표 :
  • 주소 :
  • 메일 : admin@mysample.com
  • 사업자 등록번호 :
Copyright © cginjs.com All rights reserved.
notice