CSS3 멀티미디어 쿼리LOGIN

CSS3 멀티미디어 쿼리

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>
다음 섹션
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
코스웨어