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>다음 섹션