CSS => 미디어 쿼리

통사론

@media [not | only] mediatype 및 (미디어 기능) {/ * 적용 할 CSS 규칙 * /}

매개 변수

매개 변수	세부
`mediatype`	(선택 사항) 이것은 미디어 유형입니다. `screen` 의 `all` 범위에있을 수 있습니다.
`not`	(선택 사항)이 특정 용지 유형에 대해 CSS를 적용하지 않으며 다른 모든 것에 적용됩니다.
`media feature`	CSS의 유스 케이스를 식별하는 논리. 아래에 설명 된 옵션.
미디어 기능	세부
`aspect-ratio`	출력 장치의 대상 디스플레이 영역의 종횡비를 설명합니다.
`color`	출력 장치의 색상 구성 요소 당 비트 수를 나타냅니다. 장치가 컬러 장치가 아닌 경우이 값은 0입니다.
`color-index`	출력 장치에 대한 색상 참조 테이블의 항목 수를 나타냅니다.
`grid`	출력 장치가 그리드 장치인지 또는 비트 맵 장치인지 결정합니다.
`height`	높이 미디어 기능은 출력 장치의 렌더링 표면 높이를 나타냅니다.
`max-width`	CSS는 지정된 너비보다 넓은 화면 너비에는 적용되지 않습니다.
`min-width`	CSS는 지정된 너비보다 좁은 화면 너비에는 적용되지 않습니다.
`max-height`	CSS는 지정된 높이보다 높은 화면 높이에는 적용되지 않습니다.
`min-height`	CSS는 지정된 높이보다 짧은 화면 높이에는 적용되지 않습니다.
`monochrome`	단색 (그레이 스케일) 장치의 픽셀 당 비트 수를 나타냅니다.
`orientation`	장치가 지정된 방향을 사용하는 경우에만 CSS가 표시됩니다. 자세한 내용은 설명을 참조하십시오.
`resolution`	출력 장치의 해상도 (픽셀 밀도)를 나타냅니다.
`scan`	텔레비전 출력 장치의 스캔 과정을 설명합니다.
`width`	너비 미디어 기능은 출력 장치의 렌더링 표면 너비 (예 : 문서 창의 너비 또는 프린터의 페이지 상자 너비)를 설명합니다.
사용되지 않는 기능	세부
`device-aspect-ratio`	`Deprecated` CSS는 높이 / 너비 비율이 지정된 비율과 일치하는 기기에만 표시됩니다. 이 기능은 `deprecated` 작동하지 않을 수도 있습니다.
`max-device-width`	`Deprecated` `max-width` 같지만 브라우저의 표시 너비가 아닌 실제 화면 너비를 측정합니다.
`min-device-width`	`Deprecated` `min-width` 같지만 브라우저의 표시 너비가 아닌 실제 화면 너비를 측정합니다.
`max-device-height`	`Deprecated` `max-height` 같지만 브라우저의 표시 너비가 아닌 실제 화면 너비를 측정합니다.
`min-device-height`	`Deprecated` `min-height` 같지만 브라우저의 표시 너비가 아닌 실제 화면 너비를 측정합니다.

비고

미디어 쿼리는 Chrome, Firefox, Opera 및 Internet Explorer 9 이상을 포함한 모든 최신 브라우저에서 지원됩니다.

orientation 미디어 기능은 모바일 장치에만 국한되지 않습니다. 뷰포트의 너비와 높이를 기반으로합니다 (창이나 장치가 아님).

가로 모드 는 뷰포트 너비가 뷰포트 높이보다 큰 경우입니다.

세로 모드 는 뷰포트 높이가 뷰포트 너비보다 큰 경우입니다.

이것은 일반적으로 데스크탑 모니터를 가로 모드로 변환하지만 때때로 세로 모드 일 수도 있습니다.

대부분의 경우 모바일 장치는 픽셀 밀도로 인해 달라질 수있는 실제 픽셀 크기가 아니라 해상도를보고합니다. 실제 픽셀 크기를보고하도록 강제하려면 head 태그 내부에 다음을 추가하십시오.

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

기본 예제

@media screen and (min-width: 720px) {
    body {
        background-color: skyblue;
    }
}

위의 미디어 쿼리는 두 가지 조건을 지정합니다.

이 페이지는 일반 화면 (인쇄 된 페이지, 프로젝터 등이 아닌)에서 열어야합니다.
사용자보기 포트의 너비는 720 픽셀 이상이어야합니다.

이러한 조건이 충족되면 미디어 쿼리의 스타일이 활성화되고 페이지 배경색이 하늘색으로 표시됩니다.

미디어 쿼리는 동적으로 적용됩니다. 페이지로드시 미디어 쿼리에 지정된 조건이 충족되면 CSS가 적용되지만 조건이 충족되지 않으면 즉시 비활성화됩니다. 반대로 처음에 조건이 충족되지 않으면 지정된 조건이 충족 될 때까지 CSS가 적용되지 않습니다.

이 예에서 사용자의보기 포트 너비가 초기에 720 픽셀보다 크지 만 사용자가 브라우저의 너비를 줄이면 사용자가보기 포트의 크기를 720 픽셀 미만으로 조정하면 배경색이 하늘색으로 그어집니다 폭.

링크 태그에 사용

<link rel="stylesheet" media="min-width: 600px" href="example.css" />

이 스타일 시트는 계속 다운로드되지만 화면 너비가 600px보다 큰 기기에만 적용됩니다.

미디어 종류

미디어 질의는 옵션 mediatype 매개 변수 mediatype 집니다. 이 매개 변수는 @media 선언 ( @media mediatype ) 바로 뒤에 위치합니다. 예를 들면 다음과 같습니다.

@media print {
    html {
        background-color: white;
    }
}

위의 CSS 코드는 인쇄 될 때 DOM HTML 요소에 흰색 배경색을 부여합니다.

mediatype 매개 변수는 선택 사항이 not 거나 only 각각 지정된 MediaType에 나는 지정된 미디어 타입을 제외한 모든에 스타일을 적용합니다 접두사. 예를 들어 다음 코드 예제에서는 print 제외한 모든 미디어 유형에 스타일을 적용합니다.

@media not print {
    html {
        background-color: green;
    }
}

그리고 같은 방식으로 화면에 표시하기 만하면됩니다.

@media only screen {
    .fadeInEffects {
        display: block;
    }
}

mediatype 의 목록은 다음 표에서 더 잘 이해할 수 있습니다.

미디어 종류	기술
`all`	모든 기기에 적용
`screen`	기본 컴퓨터
`print`	일반적으로 프린터. 웹 사이트의 인쇄 버전 스타일을 지정하는 데 사용됩니다.
`handheld`	PDA, 핸드폰 및 소형 장치가 장착 된 휴대용 장치
`projection`	프로젝션 프리젠 테이션의 경우, 예를 들어 프로젝터
`aural`	음성 시스템
`braille`	점자 접촉 장치
`embossed`	페이지 된 점자 프린터
`tv`	텔레비전 장치
`tty`	고정 피치 문자 그리드가있는 장치. 터미널, 휴대용 컴퓨터.

미디어 쿼리를 사용하여 다른 화면 크기를 대상으로 지정

종종 반응 형 웹 디자인에는 조건이 충족 될 때만 실행되는 CSS 블록 인 미디어 쿼리가 포함됩니다. 미디어 쿼리를 사용하여 웹 사이트 모바일 버전과 데스크톱 버전에 대해 서로 다른 CSS 스타일을 지정할 수 있으므로 반응 형 웹 디자인에 유용합니다.

@media only screen and (min-width: 300px) and (max-width: 767px) {
    .site-title {
        font-size: 80%;
    }

    /* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .site-title {
        font-size: 90%;
    }

    /* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}

@media only screen and (min-width: 1024px) {
    .site-title {
        font-size: 120%;
    }

    /* Styles in this block are only applied if the screen size is over 1024px wide. */
}

너비 대 뷰포트

미디어 쿼리에 "너비"를 사용하는 경우 메타 태그를 올바르게 설정하는 것이 중요합니다. 기본 메타 태그는 다음과 같으며 <head> 태그 안에 넣어야합니다.

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

왜 이것이 중요한가?

MDN의 정의에 따르면 "너비"는

너비 미디어 기능은 출력 장치의 렌더링 표면 너비 (예 : 문서 창의 너비 또는 프린터의 페이지 상자 너비)를 설명합니다.

그게 무슨 뜻 이죠?

View-port는 장치 자체의 너비입니다. 화면 해상도에 해상도가 1280 x 720이라고 표시되면보기 포트 너비는 "1280 픽셀"입니다.

종종 많은 장치가 한 픽셀을 표시하기 위해 서로 다른 픽셀 양을 할당합니다. 예를 들어 iPhone 6 Plus에는 1242 x 2208 해상도가 있습니다. 그러나 실제 뷰포트 너비와 뷰포트 높이는 414 x 736입니다. 즉, 1 픽셀을 만드는 데 3 개의 픽셀이 사용됩니다.

그러나 meta 태그를 올바르게 설정하지 않으면 축소 된보기 (더 작은 텍스트 및 이미지)로 나타나는 네이티브 해상도로 웹 페이지를 표시하려고 시도합니다.

Retina 및 Non Retina 화면에 대한 미디어 쿼리

이 기능은 WebKit 기반 브라우저에서만 작동하지만 도움이됩니다.

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

배경 정보

디스플레이에는 두 가지 유형의 픽셀이 있습니다. 하나는 논리적 픽셀이고 다른 하나는 물리적 픽셀입니다. 대부분의 물리적 픽셀은 모든 디스플레이 장치에서 동일하기 때문에 항상 동일하게 유지됩니다. 논리 픽셀은 고품질 픽셀을 표시하기 위해 장치의 해상도에 따라 변경됩니다. 장치 픽셀 비율은 실제 픽셀과 논리 픽셀 간의 비율입니다. 예를 들어 MacBook Pro Retina, iPhone 4 이상은 물리적 인 선형 해상도가 논리적 인 해상도의 두 배이기 때문에 장치 픽셀 비율을 2로보고합니다.

이 기능이 WebKit 기반 브라우저에서만 작동하는 이유는 다음과 같습니다.

규칙 앞의 공급 업체 접두어 -webkit- .
이것은 WebKit 및 Blink 이외의 엔진에서는 구현되지 않았습니다.

전문 용어와 구조

미디어 쿼리가 하나의 장치 / 매체 (예를 들어 스크린 인쇄 또는 휴대용)라는 미디어 타입의 종류에 따라 CSS 규칙을 적용 할 수 있도록, 장치의 추가 양상은 컬러 또는 뷰포트 차원 가용성 미디어 기능을 설명한다.

미디어 쿼리의 일반 구조

@media [...] {
    /* One or more CSS rules to apply when the query is satisfied */
}

미디어 유형을 포함하는 미디어 쿼리

@media print {
    /* One or more CSS rules to apply when the query is satisfied */
}

미디어 유형 및 미디어 기능을 포함하는 미디어 쿼리

@media screen and (max-width: 600px) {
    /* One or more CSS rules to apply when the query is satisfied */
}

미디어 기능 (및 암시적인 미디어 유형 "all")을 포함하는 미디어 쿼리

@media (orientation: portrait) {        
    /* One or more CSS rules to apply when the query is satisfied */
}

미디어 쿼리 및 IE8

미디어 쿼리 는 IE8 이하에서는 전혀 지원되지 않습니다.

자바 스크립트 기반 해결 방법

IE8에 대한 지원을 추가하려면 여러 가지 JS 솔루션 중 하나를 사용할 수 있습니다. 예를 들어 다음 코드를 사용하여 IE8에 대한 미디어 쿼리 지원을 추가하기 위해 응답 을 추가 할 수 있습니다.

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries 는 똑같은 일을하는 또 다른 라이브러리입니다. 해당 라이브러리를 HTML에 추가하는 코드는 동일합니다.

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

대안

JS 기반 솔루션이 마음에 들지 않으면 IE <9 스타일 지정을 조정하는 IE <9 스타일 시트 만 추가하는 것도 고려해야합니다. 이를 위해 코드에 다음 HTML을 추가해야합니다.

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

노트 :

엄밀히 말하면 IE의 목표를 정하기 위해 CSS 해킹 을 사용하는 것입니다. IE <9 스타일 시트와 동일한 영향을 미치지 만,이를 위해 별도의 스타일 시트가 필요하지 않습니다. 하지만이 옵션은 잘못된 CSS 코드를 생성하므로 권장하지 않습니다. CSS 해킹 사용이 일반적으로 금새 눈살을 찌푸리게하는 몇 가지 이유 중 하나입니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

CSS
미디어 쿼리

수색…

통사론