html5 미디어 쿼리 문이란 무엇입니까?

미디어 쿼리

- 미디어 쿼리란 무엇입니까?

미디어 쿼리를 사용하면 장치 디스플레이의 특성(예: 뷰포트 너비, 화면 비율, 장치 방향: 가로 또는 세로)을 기반으로 CSS 스타일을 설정할 수 있습니다. 미디어 쿼리는 미디어 유형과 미디어 특성을 감지하기 위한 하나 이상의 조건으로 구성됩니다. . 표현 구성. 미디어 쿼리에서 감지할 수 있는 미디어 속성은 width , height , color 등입니다. 미디어 쿼리를 사용하면 페이지 콘텐츠를 변경하지 않고도 특정 출력 장치에 대한 표시 효과를 사용자 지정할 수 있습니다.

- 미디어 쿼리 및 유연한 상자 레이아웃의 적용 가능성

미디어 쿼리: 페이지 구조가 변경될 때 미디어 쿼리를 사용하는 것이 가장 좋습니다. 유연한 상자: 너비와 높이만 변경되는 경우 유연한 상자를 사용해 보세요

- 사용 방법

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>

@media 미디어 유형 및 (미디어 특성) {당신의 스타일}

미디어 쿼리 사용은 "@media"로 시작해야 합니다. , 그런 다음 미디어 유형(장치 유형이라고도 함)을 지정한 다음 지정된 미디어 특성(장치 특성이라고도 함)을 지정합니다. 미디어 속성의 작성 방법은 스타일의 작성 방법과 매우 유사합니다. 크게 두 부분으로 나누어집니다. 첫 번째 부분은 미디어 속성을 나타내며 두 ​​번째 부분은 미디어 속성에서 지정하는 값이며 콜론은 다음과 같습니다. 두 부분 사이에 사용됩니다. 예:

(max-width: 480px)

CSS 속성과 달리 미디어 속성은 보다 작음(<) 및 보다 큼(>)과 같은 기호를 사용하는 대신 min/max를 사용하여 논리적 판단으로 크거나 같음을 나타냅니다. 판단하다.

- 미디어 유형

- 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。

@media screen and (max-width:580px){
 body {
   background-color: red;
  }
}

上面表示的是：当屏幕小于或等于580px时,页面的背景颜色变为红色。

- 最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
  .wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

- 多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。  当屏幕在600px~900px之间时，body的背景色渲染为“blue”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:blue;}
}

- 设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

-逗号分隔列表

当使用媒体查询的逗号分隔列表时，如果列表中的任何媒体查询为true，样式表都会被运用。在逗号分隔列表中的每个媒体查询都被作为独立查询对待，运用到一个媒体查询上的任何操作符都不影响其它的。

例如，如果你想应用一套样式在宽度大于等于700px的设备上，或者采用横向模式的便捷式设备上，你可以这样：

@media (min-width: 700px),handheld and (orientation: landscape) { ... }

如果我使用的设备的屏幕宽度大于700px，媒体查询将返回true，样式将被运用。如果我使用的是横向的便捷式设备，第一个媒体查询返回false，但第二个媒体查询将返回true，样式仍将被使用。

- not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

- only关键词

only操作符表示仅在媒体查询匹配成功时应用指定样式。  可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="only"，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="screen"，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略

- 在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

-在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的打印预览上，或者被用于屏幕宽度大于或等于960px的设备上。

推荐学习：《HTML5视频教程》