CSS3의 @media 규칙

❮ 이전 다음 ❯

예

뷰포트가 480 픽셀 넓거나 넓은 경우 배경 색상을 변경합니다 :

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

»그것을 자신을 시도

더 "Try it Yourself" 아래의 예.

정의 및 사용

@media 규칙은 다른 매체 유형 / 장치에 대한 다른 스타일 규칙을 정의하기 위해 사용된다.

CSS3에서 미디어 쿼리를 호출하는 동안 CSS2에서이 미디어 유형을 불렀다.

미디어 쿼리는 장치의 성능을보고, 등과 같은 많은 것들을 확인하는데 사용될 수있다 :

너비와 뷰포트의 높이
폭과 높이 장치
방향 (is the tablet/phone in landscape or portrait mode?)
해결
그리고 훨씬 더

브라우저 지원

표의 수치는 완전히 @media 규칙을 지원하는 제 브라우저 버전을 지정한다.

재산
@media	(21)	9	3.5	4.0	9

CSS 구문

@media not|onlymediatype and (media feature){
CSS-Code;
}

또한 다른 미디어에 대해 서로 다른 스타일을 가질 수 있습니다 :

미디어 유형

값	기술
all	모든 미디어 유형 장치에 사용
aural	추천되고 있지 않습니다. 음성 및 사운드 신디사이저에 사용
braille	추천되고 있지 않습니다. 점자 촉각 피드백 장치에 사용
embossed	추천되고 있지 않습니다. 페이징 점자 프린터에 사용
handheld	추천되고 있지 않습니다. 작은 또는 핸드 헬드 장치에 사용
print	프린터에 사용
projection	추천되고 있지 않습니다. 슬라이드처럼 투영 된 프리젠 테이션에 사용
screen	컴퓨터 화면, 태블릿, 스마트 폰 등을 위해 사용
speech	스크린 리더에 사용은 "reads" 큰 소리로 페이지를
tty	추천되고 있지 않습니다. 텔레타이프 및 터미널 같은 고정 피치 문자 격자를 사용하여 미디어에 사용
tv	추천되고 있지 않습니다. 텔레비전 형 기기에 사용

미디어 기능

값	기술
aspect-ratio	폭 뷰포트의 높이의 비율
color	출력 장치의 색 성분마다의 비트 수
color-index	장치가 표시 할 수있는 색상의 수
device-aspect-ratio	폭과 상기 장치의 높이의 비율
device-height	이러한 컴퓨터 화면과 같은 장치의 높이
device-width	이러한 컴퓨터 화면과 같은 장치의 폭
grid	장치는 격자 또는 맵을인지
height	뷰포트의 높이
max-aspect-ratio	폭과 상기 표시 영역의 높이 간의 최대 비
max-color	상기 출력 장치에 대한 컬러 성분 당 비트의 최대 개수
max-color-index	장치가 표시 할 수있는 색상의 최대 수
max-device-aspect-ratio	폭과 상기 장치의 높이의 최대 비
max-device-height	이러한 컴퓨터 화면과 같은 장치의 최대 높이
max-device-width	이러한 컴퓨터 화면과 같은 장치의 최대 폭
max-height	예컨대 브라우저 윈도우와 표시 영역의 최대 높이
max-monochrome	당 비트의 최대 수 "color" 흑백에 (greyscale) 장치
max-resolution	dpi로 또는 DPCM을 이용하여 장치의 최대 해상도
max-width	예컨대 브라우저 윈도우와 표시 영역의 최대 폭
min-aspect-ratio	폭과 상기 표시 영역의 높이 간의 최소 비율
min-color	출력 장치의 색 성분마다의 비트 최소
min-color-index	장치가 표시 할 수있는 색상의 최소 수
min-device-aspect-ratio	폭과 상기 장치의 높이 사이의 최소 비율
min-device-width	이러한 컴퓨터 화면과 같은 장치의 최소 폭
min-device-height	이러한 컴퓨터 화면과 같은 디바이스의 최소 높이
min-height	예컨대 브라우저 윈도우와 표시 영역의 최소 높이
min-monochrome	당 비트의 최소 수 "color" 흑백에 (greyscale) 장치
min-resolution	dpi로 또는 DPCM을 이용하여 장치의 최소 해상도
min-width	예컨대 브라우저 윈도우와 표시 영역의 최소 폭
monochrome	당 비트 수 "color" 흑백에 (greyscale) 장치
orientation	뷰포트의 방향 (landscape or portrait mode)
overflow-block	어떻게 블록 축을 따라 뷰포트 오버플 출력 장치 핸들 콘텐츠 (added in Media Queries Level 4)
overflow-inline	인라인 축을 따라 뷰포트를 오버 플로우 내용을 스크롤 할 수 있습니다 (added in Media Queries Level 4)
resolution	dpi로 또는 DPCM을 이용하여 출력 장치의 해상도
scan	출력 장치의 주사 방법
update-frequency	얼마나 빨리 출력 장치는 콘텐츠의 외관을 변경할 수있다 (added in Media Queries Level 4)
width	뷰포트의 폭

더 예

예

반응 형 디자인을 만들기 위해 @media 규칙을 사용합니다 :

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}