미디어 쿼리란? max-width /min-width

미디어 쿼리란?

미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)이다.

모든 미디어 쿼리는 다음 두가지 구성 요소를 지니고 있다.

 

1. 미디어 타입

2. 조건에 대한 물음(쿼리)

 

 @media screen and (max-width : 768px){
      /* 화면(screen) 의 너비가 768px 이하일 경우에
      여기에 정의된 스타일 선언문을 추가 적용할 것이다. */
    }

 

max-width : 768 px 은

최대크기가 768px 임으로 768px이하

 

min-width  : 768 px은

최소크기가 769px임으로 768px 이상

 

---

✔ 미디어 타입과 쿼리 종류 

속성명	정의	속성명	정의
min-width	디스플레이 영역의 최소너비	orientation	portrait 또는 landscape 감지
max-width	디스플레이 영역의 최대너비	color	기기의 색상당 비트수
min-height	디스플레이 영역의 최소높이	color-index	출력 기기의 색상 테이블
max-height	디스플레이 영역의 최대높이	aspect-ratio	디스플레이 영역의 너비와 높이