CSS3에서 미디어 미디어 쿼리의 사용법은 무엇입니까-프런트엔드 Q&A-php.cn

CSS3에서 미디어 미디어 쿼리의 사용법은 무엇입니까

WBOY

풀어 주다： 2022-04-28 15:45:22

원래의

2105명이 탐색했습니다.

CSS3에서 미디어 미디어 쿼리는 다양한 미디어 유형이나 장치에 대해 다양한 스타일을 정의하는 데 사용됩니다. 구문은 "@media not|only 미디어 유형 및 (. ..)입니다. {CSS 스타일 코드}'.

CSS3에서 미디어 미디어 쿼리의 사용법은 무엇입니까

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3에서 미디어 미디어 쿼리의 사용법은 무엇입니까?

@media 쿼리를 사용하면 다양한 미디어 유형에 대해 다양한 스타일을 정의할 수 있습니다.

@media는 다양한 화면 크기에 맞게 다양한 스타일을 설정할 수 있습니다. 특히 반응형 페이지를 설정해야 하는 경우 @media는 매우 유용합니다.

브라우저 크기를 재설정하면 브라우저의 너비와 높이에 따라 페이지도 다시 렌더링됩니다.

미디어 쿼리를 사용하면 다음과 같은 다양한 사항을 확인할 수 있습니다.

뷰포트 너비 및 높이
장치 너비 및 높이
방향(휴대전화나 태블릿이 가로 모드인가요, 세로 모드인가요?)
Resolution

구문은

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

로그인 후 복사

not, only and and 키워드의 의미:

not: not 키워드는 어쨌든 전체 미디어 쿼리의 의미입니다.
only: only 키워드는 미디어 속성이 있는 미디어 쿼리를 지원하지 않는 이전 브라우저가 지정된 스타일을 적용하는 것을 방지합니다. 최신 브라우저에는 영향을 미치지 않습니다.
and: and 키워드는 미디어 속성을 미디어 유형 또는 기타 미디어 속성과 결합합니다.

모두 선택사항입니다. 그러나 not 또는 only를 사용하는 경우 미디어 유형도 지정해야 합니다.

다음과 같이 다양한 미디어에 대해 다양한 스타일 시트를 사용할 수도 있습니다.

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

로그인 후 복사

예는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
    background-color:lightgreen;
}
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
<SCRIPT>
<!--
function resize_window() {
        window.open (&#39;http://www.runoob.com/try/demo_source/trycss3_media_example1.htm&#39;,&#39;newwindow&#39;,&#39;height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no&#39;)
}
//写成一行
-->
</SCRIPT>
</body>
</html>

로그인 후 복사

출력 결과:

CSS3에서 미디어 미디어 쿼리의 사용법은 무엇입니까