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>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>php.cn</title> <style> .wrapper {overflow:auto;} #main {margin-left: 4px;} #leftsidebar {float: none;width: auto;} #menulist {margin:0;padding:0;} .menuitem { background:#CDF0F6; border:1px solid #d4d4d4; border-radius:4px; list-style-type:none; margin:14px; padding:12px; } @media screen and (min-width: 300px) { #leftsidebar {width:200px;float:right;} #main {margin-left:216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">php</li> <li class="menuitem">js</li> <li class="menuitem">css</li> <li class="menuitem">html</li> <li class="menuitem">ios</li> </ul> </div> <div id="main"> <p>在屏幕可视窗口尺寸小于 300 像素时将菜单浮动到页面右侧。</p> </div> </div> </body> </html>

제출하다 코드 재설정

자동운전