Css Media Query - 기술

문서의 이전 판을 선택했습니다! 저장하면 이 자료로 새 판을 만듭니다.

====== Css Media Query ======

CSS3부터 지원하는 것으로, 여러 다양한 단말기의 조건에 따라 다른 화면구성을 할 수 있도록 한 것이다.

모든 최신 인터넷브라우져에서 지원한다. 
[[ie]]의 경우 IE9 부터 지원한다.

우선 ‘only’와 ‘not’으로 뒤 조건을 한정할 수 있고
‘all’, ‘screen’ 등의 미디어 타입 (media type) 과
‘min-width’ 와 같은 미디어 속성 (media feature)과 ‘320px’와 같은 해당 값의 쌍을 ‘:’으로 연결하고 괄호로 둘러싸서
조건을 표현한다.

그리고 미디어 타입을 사용하지 않으면 ‘all’로 이해하고, ‘(미디어 속성 : 값)’ 조건은 ‘and’로 계속 추가할 수 있다. 이렇게 표현된 조건을 쉼표 ','로 연결하여 동일한 스타일에 여러 조건을 적용할 수도 있다.

조건부 CSS화일
  <link rel="stylesheet" media="print and (min-width: 25cm)" href="print.css" />
CSS 내의 조건
  @media screen and (min-width: 400px) and (max-width: 700px) { … }

‘width’와 ‘device-width’의 차이는, iPhone4 (레티나)처럼 기기 스크린은 320x480이지만 해상도는 640x960 인 경우, ‘device-width’ 는 320px이고, ‘width’는 640px 입니다.

<file css>
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

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

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

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
</file>

편집 요약

참고: 이 문서를 편집하면 내용은 다음 라이선스에 따라 배포하는 데 동의하는 것으로 간주합니다: CC Attribution-Noncommercial-Share Alike 4.0 International

연결문서