[CSS] Media query

Media query

다양한 기기 특성과 파라메터의 존재 여부에 따라 사이트나 앱을 조정할 수 있다.(반응형 디자인의 핵심 구성 요소)

---

property

• max-width : 뷰 영역에서의 최대 넓이, 즉 지정한 사이즈보다 작은 경우 적용
• min-widht : 뷰 영역에서의 최th 넓이, 즉 지정한 사이즈보다 넓은 경우 적용
• max-device-width : 디바이스 사이즈의 최대 넓이. 지정한 사이즈보다 작은 경우 적용
• min-device-width : 디바이스 사이즈의 최소 넓이. 지정한 사이즈보다 넓은 경우 적용
• orientation : 세로 길이(portrait) 또는 가로 길이(landscape) 중 하나로 기준을 적용
• device-pixel-ratio : 디바이스의 해상도를 기준으로 적용

---

Media query의 기본 사용법

@media (조건문) { 실행코드 }

적용 예시

/* 450px보다 넓은 경우 적용 */
@media screen and (min-width: 450px){
 실행코드 }
 
/* 50px보다 넓고 100px보다 작은 경우 적용 */ 
@media screen and (min-width: 50px) and (max-width: 100px){
 실행코드 }
 
/* 세로모드시 적용 */
@media screen and (orientation.portrait){
 실행코드 }

/* 가로모드시 적용 */
@media screen and (orientation.landscape){
 실행코드 }

---

Viewport 지정

모바일에서 media query를 오류없이 적용시키기 위해서는 viewport를 지정해야한다.

head 태그 안에 아래의 코드를 입력해준다.

<meta name="viewport" content="width=device-width, maximum-scale=1.0, 
minimum-scale=1, user-scalable=yes,initial-scale=1.0" />