CSS3 멀티미디어 쿼리

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	모든 멀티미디어 유형 장치용
print
screen	컴퓨터 화면용, 태블릿, 스마트폰 등
speech	스크린 리더용

멀티미디어 쿼리의 간단한 예

멀티미디어 쿼리를 사용하면 원래 스타일을 지정된 장치의 해당 스타일로 바꿀 수 있습니다.

다음 예에서는 화면에서 볼 수 있는 창 크기가 480픽셀보다 큰 장치에서 배경색이 수정됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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>

프로그램을 실행하여 사용해 보세요

다음 예에서는 메뉴를 화면 왼쪽에 띄웁니다. 화면에서 볼 수 있는 창 크기가 480픽셀보다 큰 경우 페이지 :

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> 
<title>php中文网(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: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>

프로그램을 실행해서 사용해 보세요

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>php中文网(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: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>

제출하다 코드 재설정

자동운전