[ CSS3 ] 미디어 쿼리 (Media Query) + 각 디바이스

 

 

 

💖 CSS 미디어 쿼리(Media Query)

 

미디어 쿼리는 단말기의 유형, 화면 해상도, 뷰포트 너비 등에 따라 사이트의 스타일(CSS)을 적용할 수 있습니다.

해상도 320px 이상 또는 768px 미만 -> 스마트폰
해상도 768px 이상 또는 1024px 미만 -> 태블릿
해상도 1024px 초과 -> PC

 

 

1. <style>, <link>, <source>, 기타 다른 HTML 요소에 media 특성을 사용해 특정 매체만 사용하도록 할 때 사용합니다.

2. CSS @media, @import @규칙을 사용해 특정 조건에 따라 스타일을 적용할 때 사용합니다.

3. 모든 최신 브라우저에서 미디어 쿼리가 동작하지만, 만약 IE 8이하에서 동작해야하는 경우라면 polyfill 라이브러리를 사용합니다.

 

 

@media only | not 미디어유형 and | , (조건문) {
	/* 적용할 CSS */
}


@media (orientation: portrait) {
	/* Portrait(세로) 모드일 때 적용할 CSS */
}


@media (orientation: landscape) {
	/* Landscape(가로) 모드일 때 적용할 CSS */
}

 

 

 

 

 

---

 

✨ viewport

1. viewport는 디지털 기기에 표시되는 화면이다.

2. 모바일이나 태블릿은 미리 설정되어 있는 모바일이나 태블릿은 미리 설정되어 있는 viewport로 인해 미디어 쿼리가 제대로 작동하지 않을 수 있다.

3. <meta> 태그의 속성 중 하나인 viewport을 입력해서 디바이스에서 의도한 대로 화면이 출력되도록 하자.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 모든 기기의 뷰포트가 다 다르게 설정되어 있기 때문에 모든 기기의 배율을 1로 설정하겠다 라는 의미

 

 

 

 

---

 

 

 

/* 큰 모니터: */
@media only screen and (min-width : 1824px) {
       /* Styles */
}


/* 데스크탑 브라우저 (가로): */
@media only screen and (min-width : 1224px) {
       /* Styles */
}


/* iPad (가로/세로): */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
       /* Styles */
}


/* iPad (가로): */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
       /* Styles */
}


/* iPad (세로): */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
       /* Styles */
}


}
/* 스마트폰 (가로/세로): */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
       /* Styles */
}


/* 스마트폰 (가로): */
@media only screen and (min-width : 321px) {
       /* Styles */
}


/* 스마트폰 (세로): */
@media only screen and (max-width : 320px) {
       /* Styles */
}


/* iPhone4와 같은 높은 해상도: */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
       /* Styles */
}