CSS3 멀티미디어 쿼리

CSS2 멀티미디어 유형

@media 규칙은 CSS2에 도입되었으며 다양한 스타일 규칙은 다양한 미디어 유형에 맞게 사용자 정의할 수 있습니다.

예를 들어 다양한 미디어 유형(모니터, 휴대용 장치, TV 등)에 대해 서로 다른 스타일 규칙을 설정할 수 있습니다.

그러나 이러한 멀티미디어 유형은 많은 장치에서 지원할 만큼 친숙하지 않습니다.

CSS3 멀티미디어 쿼리

CSS3 멀티미디어 쿼리는 CSS2 멀티미디어 유형의 모든 아이디어를 상속합니다. 장치 유형을 찾는 대신 설정에 따라 CSS3 적응형 디스플레이를 찾습니다.

미디어 쿼리는 다음과 같은 다양한 항목을 감지하는 데 사용할 수 있습니다.

뷰포트 너비 및 높이 장치 너비 및 높이 방향(스마트폰 가로, 세로). 해결

현재 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: 모든 기기에서 자주 볼 수 있는 내용입니다.

다른 미디어에서 다른 스타일 파일을 사용할 수도 있습니다.

体CSS3 멀티미디어 유형

값 설명

All은 모든 멀티미디어 유형 장치에 사용됩니다.

프린터용 인쇄

컴퓨터 화면, 태블릿, 스마트폰 등의 화면 용 음성은 스크린 리더에 사용됩니다.

멀티미디어 쿼리 간단한 예

멀티미디어 쿼리를 사용하여 해당 스타일을 사용하여 지정된 장치의 원래 스타일을 바꿉니다. 다음 예에서는 화면에서 볼 수 있는 창 크기가 480픽셀보다 큰 기기에서 배경색이 수정되었습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body {
    background-color: pink;
}
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>
<h1>重置浏览器窗口查看效果！</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <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:4px; padding:2px; } @media screen and (min-width: 480px) { #leftsidebar {width:200px;float:left;} #main {margin-left:216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">Menu-item 1</li> <li class="menuitem">Menu-item 2</li> <li class="menuitem">Menu-item 3</li> <li class="menuitem">Menu-item 4</li> <li class="menuitem">Menu-item 5</li> </ul> </div> <div id="main"> <h1>重置浏览器窗口查看效果！</h1> <p>在屏幕可视窗口尺寸小于 480 像素时将菜单浮动到页面左侧。</p> </div> </div> </body> </html>

제출하다 코드 재설정

자동운전