CSS3 미디어 쿼리의 구문 키워드는 무엇입니까

css3 미디어 쿼리의 구문 키워드는 "@media"입니다. 이를 통해 페이지에 대해 다양한 미디어 조건을 설정하고 조건에 따라 해당 스타일을 적용할 수 있습니다. 기본 구문 형식은 "@media mediatype and|not|only(미디어 기능)입니다. ) {CSS 코드;}".

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

미디어 쿼리는 CSS3에서 제안된 새로운 개념으로, 페이지에 대해 다양한 미디어 조건을 설정하고 조건에 따라 해당 스타일을 적용할 수 있습니다.

css3 미디어 쿼리의 구문 키워드는 "@media"입니다.

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

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

구문: ​​

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

only는 전체 쿼리 결과를 제한하는 데 사용되며, not은 전체 쿼리 결과를 부정하는 데 사용됩니다. not 또는 only 키워드를 사용하는 경우 미디어 유형을 명시적으로 지정해야 하며 해당 키워드는 전체 미디어 쿼리 문의 시작 부분에 있어야 합니다.

1) 및

키워드 및는 미디어 유형의 표현과 여러 미디어 특성을 동일한 미디어 쿼리로 결합하는 데 사용됩니다. 쿼리 결과는 미디어 유형과 각 표현식의 결과가 true인 경우에만 true입니다. 예:

screen and (min-width: 700px) and (orientation: landscape)

미디어 쿼리의 결과는 부울 값(true 또는 false)입니다. 및 연결의 모든 부분이 true인 경우에만 전체 미디어 쿼리 문의 결과가 true입니다.

미디어 쿼리는 브라우저에 대한 질문으로 생각할 수도 있습니다. 위의 미디어 쿼리는 먼저 "모니터입니까?"라고 묻습니다. 브라우저가 "예"라고 대답하면 "최소 너비가 700픽셀입니까?"라고 계속해서 묻습니다. "화면이 가로 방향인가요?"라고 물어보세요. 세 가지 질문에 대한 대답이 모두 "예"인 경우에만 전체 미디어 쿼리 문의 결과가 true가 됩니다.

2) only

only 키워드는 범위를 제한하는 데 사용되며 쿼리 결과 전체에 적용됩니다. 예:

only screen and (color)

는 컬러 디스플레이 장치에만 유효하며 다른 장치에는 유효하지 않습니다.

not (screen and (color))

3) not

키워드 not은 전체 쿼리 결과를 부정하는 데 사용됩니다. 예:

not (screen and (monochrome))

는 흑백 디스플레이 장치를 제외한 모든 장치를 의미합니다.

not (screen and (monochrome))

대신

(not screen) and (monochrome)

와 동일합니다. 단일 쿼리 외에도 쉼표로 구분된 미디어 쿼리 목록을 정의할 수도 있습니다. 목록에 있는 미디어 쿼리의 결과가 true이면 미디어 쿼리 목록의 결과도 true이고, 그렇지 않으면 미디어 쿼리 목록의 결과도 false입니다.

미디어 쿼리 목록의 각 쿼리는 서로 독립적이며, 한 쿼리의 연산자는 다른 미디어 쿼리에 영향을 주지 않습니다. 따라서 미디어 쿼리 목록은 다양한 미디어 유형 및 미디어 속성에서 작동할 수 있습니다. 예:

(min-width: 700px), handheld and (orientation: landscape)

위 미디어 쿼리 목록에는 최소 너비가 700픽셀인 모든 장치 또는 가로 화면이 있는 휴대용 장치의 경우 미디어 쿼리 목록의 결과가 true이고, 다른 경우에는 두 개의 미디어 쿼리가 포함되어 있습니다. , 그것은 거짓입니다.

미디어 쿼리를 사용하여 반응형 레이아웃을 구축할 수 있습니다. 미디어 쿼리를 사용하는 방법에는 두 가지가 있습니다. 하나는 @media 규칙을 사용하여 다른 CSS 코드를 로드하도록 선택하는 것이고, 다른 하나는 태그의 미디어 속성을 사용하여 다른 스타일 시트 파일을 로드하도록 선택하는 것입니다.

미디어 쿼리 설정

1) @media 규칙 사용

@media 규칙을 사용하여 동일한 CSS 파일의 다양한 미디어 조건에 따라 다양한 스타일을 정의하세요. 사용자가 웹페이지를 탐색할 때 브라우저는 미디어 쿼리 결과에 따라 적용할 CSS 코드 부분을 선택합니다.

@media 규칙의 구문은 @media 뒤에 미디어 유형과 미디어 특성, 그리고 해당 스타일 규칙이 정의된 중괄호 쌍이 옵니다. 예:

@media screen and (max-device-width: 480px) { 
 /* 如果设备宽度 <= 480px，将会应用这里的 CSS 代码 */
}
@media screen and (max-width: 768px) { 
 /* 如果视口宽度 <= 768px，将会应用这里的 CSS 代码 */
}

스타일의 계단식 특성에 따라 스타일 시트에서 나중에 정의된 스타일이 이전에 동일한 스타일을 덮어씁니다. 따라서 스타일 시트 시작 부분에 기본 스타일을 정의하여 모든 디자인에 적용한 다음 미디어 쿼리를 사용하여 해당 부분을 다시 작성하여 다양한 미디어 조건이 다른 스타일 규칙을 적용하도록 할 수 있습니다.

2) 태그의 미디어 속성 사용

태그의 미디어 속성을 사용하면 다양한 미디어 조건에 따라 다양한 스타일 시트 파일이 정의됩니다. 미디어 쿼리 결과, 다양한 스타일시트 파일을 로드합니다.

<link rel="stylesheet" media="screen" href="reset.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="phone.css">
<link rel="stylesheet" media="screen and (min-width: 768px)" href="screen.css">

세 가지 스타일 시트 파일인 Reset.css,phone.css,screen.css가 여기에 정의되어 있으며 모든 디스플레이 장치는 Reset.css를 로드할 수 있으며 뷰포트 너비가 480px 미만인 디스플레이 장치는 전화를 로드할 수 있습니다. .css. 뷰포트 너비가 768px보다 큰 디스플레이 장치에 screen.css를 로드하도록 합니다.

첫 번째 방법을 사용하면 동일한 CSS 파일에 @media를 여러 번 작성해야 하고, 두 번째 방법을 사용하면 태그를 여러 번 작성해야 함을 알 수 있습니다. 두 방법 모두 효과는 동일하므로 원하는 방법을 선택하시면 됩니다.

事实上，还可以是CSS的 @import 指令按条件引入其他样式表。如，以下代码对给视口最大宽度为 360px 的显示屏设备加载一个名为 small.css 的样式表文件。

@import url("small.css") screen and (max-width: 360px);

但是，使用CSS的 @import 方式会增加HTTP请求，这会影响页面的加载速度，因此并不推荐使用这种方法。

在媒体查询中，把设备宽度的临界点称作断点，并把媒体特性 min-width 和 max-width 对应的属性值称作断点值。

综上所述，媒体查询就是使用断点来创建媒体查询的条件，并为每个断点调用一个样式表文件（或样式代码），来实现在不改变页面内容的情况下，为不同的设备及不同尺寸的设备定制显示效果。

说明：让IE6~8支持媒体查询

虽然媒体查询已经被广泛使用，并得到所有现代浏览器的支持，但IE 9以下的老版本浏览器却不支持它。可以选择给老版本的IE添加垫片脚本，让它们支持媒体查询功能。

respond.js（https://github.com/scottjehl/Respond）是一个快速、轻量的 Javascript 工具，它会遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，监控浏览器宽度的变化，并添加或删除与媒体查询匹配的样式，使原本不支持媒体查询的IE6-8 支持媒体查询的 min-width 和 max-width 特性。

respond.js的使用非常简单，只需在页面所有的CSS之后，使用IE条件注释，让IE6-8版本加载 respond.js 脚本即可：

<!--[if lt IE 9]>
<script  src="respond.js "></script>
<![endif]-->

但需要注意，respond.js 无法解析CSS的@import指令。因此，建议在已有的样式表中追加媒体查询的样式。如，在样式表文件中，使用 min-width 或 max-width 定义媒体查询：

@media screen and (max-width: 480px) {undefined
    // 针对视口宽度小于 480px 的显示屏设备定义样式
}

（学习视频分享：css视频教程）

위 내용은 CSS3 미디어 쿼리의 구문 키워드는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!