예
두 개의 서로 다른 미디어 유형 (화면 인쇄)에 대한 두 개의 서로 다른 스타일 시트 :
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
»그것을 자신을 시도 정의 및 사용
media 속성은 타겟 리소스 최적화되어 어떤 미디어 / 디바이스를 지정한다.
이 속성은 주로 다른 매체 유형에 대해 서로 다른 스타일을 지정하는 CSS 스타일 시트와 함께 사용됩니다.
media 속성은 여러 값을 받아 들일 수 있습니다.
브라우저 지원
| 속성 | |||||
|---|---|---|---|---|---|
| media | 예 | 예 | 예 | 예 | 예 |
HTML 4.01과 HTML5의 차이점
media 속성은 이제 더 많은 값을 지원합니다.
통사론
<link media="value">
가능한 Operators
| 값 | 기술 |
|---|---|
| and | 는 AND 연산자를 지정합니다 |
| not | 해당 없음 연산자를 지정합니다 |
| , | 는 OR 연산자를 지정 |
장치
| 값 | 기술 |
|---|---|
| all | 태만. 모든 장치에 적합 |
| aural | 음성 합성기 |
| braille | 점자 피드백 장치 |
| handheld | 핸드 헬드 장치 (작은 화면, 제한된 대역폭) |
| projection | 영사기 |
| 인쇄 미리보기 모드 / 인쇄 된 페이지 | |
| screen | 컴퓨터 화면 |
| tty | 고정 피치 문자 격자를 사용하여 텔레타이프와 유사한 미디어 |
| tv | 텔레비전 유형 장치 (저해상도 제한 스크롤 기능) |
값
| 값 | 기술 |
|---|---|
| width | 타겟 표시 영역의 폭을 지정한다. "min-" 및 "max-" 프리픽스가 사용될 수있다. 예 : media="screen and (min-width:500px)" |
| height | 목표 디스플레이 영역의 높이를 지정한다. "min-" 및 "max-" 프리픽스가 사용될 수있다. 예 : media="screen and (max-height:700px)" |
| device-width | 대상 디스플레이 / 용지의 폭을 지정합니다. "min-" 및 "max-" 프리픽스가 사용될 수있다. 예 : media="screen and (device-width:500px)" |
| device-height | 대상 디스플레이 / 용지의 높이를 지정합니다. "min-" 및 "max-" 프리픽스가 사용될 수있다. 예 : media="screen and (device-height:500px)" |
| orientation | 대상 디스플레이 / 용지의 방향을 지정합니다. 가능한 값 : "portrait" 또는 "landscape" 예 : media="all and (orientation: landscape)" |
| aspect-ratio | 목표 디스플레이 영역의 폭 / 높이 비율을 지정한다. "min-" 및 "max-" 프리픽스가 사용될 수있다. 예 : media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | 대상 디스플레이 / 용지의 장치 폭 / 장치 - 높이 비율을 지정합니다. "min-" 및 "max-" 프리픽스가 사용될 수있다. 예 : media="screen and (aspect-ratio:16/9)" |
| color | 대상 디스플레이의 색상 당 비트를 지정합니다. "min-" 및 "max-" 프리픽스가 사용될 수있다. 예 : media="screen and (color:3)" |
| color-index | 대상 디스플레이가 처리 할 수있는 색상의 수를 지정합니다. "min-" 및 "max-" 프리픽스가 사용될 수있다. 예 : media="screen and (min-color-index:256)" |
| monochrome | 흑백 프레임 버퍼의 픽셀 당 비트를 지정한다. "min-" 및 "max-" 프리픽스가 사용될 수있다. 예 : media="screen and (monochrome:2)" |
| resolution | 대상 디스플레이 / 용지의 픽셀 밀도 (dpi의 또는 DPCM)를 지정합니다. "min-" 및 "max-" 프리픽스가 사용될 수있다. 예 : media="print and (resolution:300dpi)" |
| scan | TV 디스플레이의 주사 방법을 지정한다. 가능한 값은 "progressive" 와 "interlace" . 예 : media="tv and (scan:interlace)" |
| grid | 출력 장치는 격자 또는 맵인지를 지정. 가능한 값은 "1" 그리드 및 "0" 그렇지. 예 : media="handheld and (grid:1)" |