CSS3 미디어 쿼리

CSS2 미디어 유형

@media 규칙은 CSS2에 설명하고, 다른 매체 유형 다른 스타일 규칙에 대한 사용자 정의 할 수 있습니다.

예를 들면 : 당신은 (표시를 포함하여, 휴대용 기기, 텔레비전 등) 다른 매체 유형에 대해 서로 다른 스타일 규칙을 설정할 수 있습니다.

그러나 이러한 종류의 멀티미디어는 아직 충분히 친화 많은 기기에서 지원한다.

CSS3 미디어 쿼리

CSS3 멀티미디어 질의는 모든 생각 CSS2 미디어 유형을 상속 대신 장비의 종류를 찾는, CSS3 디스플레이 설정 적응 방법.

미디어 쿼리는 등 여러 가지를 검출하는데 사용될 수있다 :

• 폭과 높이의 뷰포트 (창)
• 폭과 높이 장치
• (스마트 폰 가로 화면, 세로 화면)을 향해.
• 해결

현재, 애플 폰, 안드로이드 폰, 태블릿 및 기타 장치에 대한 많은 질의를 표시하는 데 사용됩니다.

브라우저 지원

표의 수치 속성 버전 번호를 먼저 지원 브라우저를 나타낸다.

멀티미디어 쿼리 구문

다양한 매체로 구성된 멀티미디어 메시지, 하나 이상의 표현식을 포함 할 수 있습니다, 표현은 참 또는 거짓 조건에 따라 설립 반환합니다.

@media not|only mediatype and (expressions) {
    CSS-Code;
}

지정된 매체 유형과 일치하는 장치 유형 경우 쿼리가 true를 반환 문서가 장치를 일치에 지정된 스타일의 효과를 보여줍니다.

당신이뿐만 아니라 운영자하거나 사용하지 않으면, 모든 스타일은 모든 장치의 디스플레이를 적용합니다.

• 하지 : @media는 (비 인쇄 장치)를 인쇄하지 같은 특정한 장치를 배제 할 수 없다.

• 만 : 일부 특수 용지 유형을 설정합니다.단지 키워드, 스타일 파일에서 직접 신청 후 유일한 키워드와 표현을 무시 모바일 장치 용 웹 브라우저가있는 경우 미디어에 대한 지원, 모바일 장치를 조회합니다. 미디어 쿼리에 대한 장치가 읽을 수있는 기능을 지원하지 않지만, 웹 브라우저의 매체 유형 유형, 키워드는이 스타일 파일을 무시 발생하는 경우.

• 모든 : 모든 장치가이 항상 볼 수 있습니다.

또한 다른 매체에 다른 스타일 파일을 사용할 수 있습니다 :

CSS3 미디어 유형

멀티미디어 메시지의 간단한 예

멀티미디어 쿼리를 사용하는 특정 장치의 스타일에 대응하는 원래의 스타일을 대체하는데 사용될 수있다.

하기 실시 예는 표시 화면 윈도우 크기보다 큰 480 픽셀 장비의 배경색을 변경

다음의 예는 480보다 큰 픽셀 왼쪽 메뉴 페이지로 떠 화면 윈도우 사이즈에 표시됩니다

CSS3의 @media 참조

참조 할 수 있습니다 더 많은 멀티미디어 콘텐츠 둘러 @media 규칙을.