CSS3의 멀티미디어 쿼리는 CSS2 멀티미디어 유형의 모든 아이디어를 상속합니다. 즉, 장치 유형을 찾는 대신 CSS3는 설정에 따라 적응적으로 표시합니다.
미디어 쿼리는
뷰포트 너비 및 높이
장치 너비 및 높이
방향(스마트폰 가로, 세로)과 같은 다양한 항목을 감지하는 데 사용할 수 있습니다.
Resolution
현재 Apple 휴대폰, Android 휴대폰, 태블릿 등 많은 장치에서 멀티미디어 쿼리를 사용합니다.
멀티미디어 쿼리 구문
멀티미디어 쿼리는 다양한 미디어로 구성되며 하나 이상의 표현식을 포함할 수 있습니다. 표현식은 조건이 true인지 여부에 따라 true 또는 false를 반환합니다.
@media not|only mediatype and (expressions) {
CSS-Code;
}
지정된 멀티미디어 유형이 기기 유형과 일치하면 쿼리 결과가 반환됩니다. true, 문서는 일치하는 장치에 지정된 스타일 효과를 표시합니다.
not 또는 only 연산자를 사용하지 않는 한 모든 스타일은 모든 장치에 표시되도록 조정됩니다.
not: not은 @media not print(비인쇄 장치)와 같은 특정 특정 장치를 제외하는 데 사용됩니다.
only: 특정 미디어 유형을 지정하는 데 사용됩니다. 미디어 쿼리를 지원하는 모바일 기기의 경우 only 키워드가 존재하면 모바일 기기의 웹 브라우저는 only 키워드를 무시하고 다음 표현식을 기반으로 스타일 파일을 직접 적용합니다. 미디어 쿼리를 지원하지 않지만 미디어 유형 웹 브라우저를 읽을 수 있는 장치의 경우 유일한 키워드가 발견되면 이 스타일 파일이 무시됩니다.
all: 모든 기기에서 자주 볼 수 있는 내용입니다.
인스턴스 1:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style> /* 小于200px*/ @media only screen and (max-width:200px ) { #p{ background: red; } } /* 大于300px*/ @media only screen and (min-width:300px ) { #p{ background: yellow; } } </style> </head> <body> <p id="p">小于200px背景变红色大于300px背景为黄色</p> </body> </html>
인스턴스 2:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style> /body{background:blue;}/*宽度500px-800px之间+高度100px-400px之间 蓝色*/ @media screen and (max-width:500px){body{background:green;}}/*宽度小于500px时 绿色*/ @media screen and (min-width:800px){body{background:red;}}/*宽度大于800px时 红色*/ @media screen and (max-height:100px){body{background:yellow;}}/*高度小于100px时 黄色*/ @media screen and (min-height:400px){body{background:pink;}}/*高度大于400px时 粉色*/ </style> </head> <body> <p>效果演示,请缩小/扩大浏览器的窗口大小注意背景色的变化。逻辑如下:</p> <p>/*宽度500px-800px之间+高度100px-400px之间 蓝色*/</p> <p>/*宽度小于500px时 绿色*/</p> <p>/*宽度大于800px时 红色*/</p> <p>/*高度小于100px时 黄色*/</p> <p>/*高度大于400px时 粉色*/</p> </body> </html>다음 섹션