用过媒体查询@media吗？

最新推荐文章于 2024-09-29 18:19:19 发布

灵扁扁

最新推荐文章于 2024-09-29 18:19:19 发布

阅读量29

点赞数

文章标签：媒体

本文链接：https://blog.csdn.net/weixin_42414790/article/details/132980206

版权

theme: channing-cyan

highlight: a11y-dark

用过媒体查询@media吗？

tips：每个技术点都值得优学优写：5期

@media 简述

来自 Mozilla 的关于 @media 的解释：

@media CSS 规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，您可以指定一个媒体查询和一个CSS块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该CSS块才能应用于该文档。

媒体查询(Media queries)非常实用，尤其是当你想要根据设备的大致类型(如打印设备与带屏幕的设备) 或者特定的特征和设备参数(例如屏幕分辨率和浏览器视窗宽度)来修改网站或应用程序时。

我对 @media 的理解：

因为现实中存在许多不同的设备，不同的设备可能分辨率不同，可能屏幕可见区域也不同。为了能让同一份网页在不同的设备中，表现的更友好，适配程度更高，于是 css3 设计了 @media。

使得无需修改内容便可以使样式应用于某些特定的设备范围。例如为打印机、智能手机、阅读器、电脑等不同设备，编写不同的样式表，通过 @media 识别适配应用对应的样式表。

@media 可以针对不同的屏幕尺寸设置不同的样式，这在设计响应式的页面会非常有用。例如，媒体查询可以缩小小型设备上的字体大小，在纵向模式下查看页面时增加段落之间的填充，或者增加触摸屏上按钮的大小，甚至改变布局方式。

当媒体查询返回为真时，对应的样式表会按照正常的规则被应用生效；当媒体查询返回为假时，以 link 标签上带有媒体查询的样式表为例，对应的样式表不会被应用，但仍会被下载。

语法用法示例

1.语法解释

语法解释：每条媒体查询语句都由一个可选的媒体类型和任意数量的媒体特性表达式构成。可以使用多种逻辑操作符合并多条媒体查询语句。媒体查询语句不区分大小写。

当媒体类型(如果指定)与在其上显示文档的设备匹配并且所有媒体功能表达式都计算为true时，媒体查询将计算为true。涉及未知媒体类型的查询始终为false。

2.支持的媒体类型和媒体特性

仍支持未被废弃的媒体类型：

① all，适用于所有设备。默认使用该值。

② print，适用于在打印预览模式下在屏幕上查看的分页材料和文档。

③ screen，主要屏幕设备，例如电脑屏幕，平板电脑，智能手机等。

④ speech，主要用于语音合成器。

媒体特性

以下是来自 Mozilla 的关于媒体特性的介绍

媒体特性(Media features)描述了 user agent、输出设备，或是浏览环境的具体特征。媒体特性表达式是可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。

|值 | 描述 | | ---------------------- | ---------------------------------------- | | aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 | | color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 | | color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 | | device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 | | device-height | 定义输出设备的屏幕可见高度。 | | device-width | 定义输出设备的屏幕可见宽度。 | | grid | 用来查询输出设备是否使用栅格或点阵。 | | height | 定义输出设备中的页面可见区域高度。 | | max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 | | max-color | 定义输出设备每一组彩色原件的最大个数。 | | max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 | | max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 | | max-device-height | 定义输出设备的屏幕可见的最大高度。 | | max-device-width | 定义输出设备的屏幕最大可见宽度。 | | max-height | 定义输出设备中的页面最大可见区域高度。 | | max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 | | max-resolution | 定义设备的最大分辨率。 | | max-width | 定义输出设备中的页面最大可见区域宽度。 | | min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 | | min-color | 定义输出设备每一组彩色原件的最小个数。 | | min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 | | min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 | | min-device-width | 定义输出设备的屏幕最小可见宽度。 | | min-device-height | 定义输出设备的屏幕的最小可见高度。 | | min-height | 定义输出设备中的页面最小可见区域高度。 | | min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 | | min-resolution | 定义设备的最小分辨率。 | | min-width | 定义输出设备中的页面最小可见区域宽度。 | | monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 | | orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 | | resolution | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm | | scan | 定义电视类设备的扫描工序。 | | width | 定义输出设备中的页面可见区域宽度。

3.逻辑操作符

逻辑操作符(logical operators) not, and, 和 only 可用于联合构造复杂的媒体查询，还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

①操作符 and

and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。

②操作符 only

only运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用only运算符，则还必须指定媒体类型。

③操作符逗号

逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为true，则整个media语句均返回true。换句话说，列表的行为类似于逻辑或or运算符。

④操作符 not

not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用not运算符，则还必须指定媒体类型。

4.用法示例：

```css /* 可以放在 style 的顶部，或其他位置 */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } }

/* 嵌套在一组 css 规则中 */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } ```

```css /限定媒体类型：print 打印设备/ @media print { body { font-size: 10pt; } }

/限定媒体类型：screen 电脑、智能手机等屏幕/ @media screen { body { font-size: 13px; } }

/两种类型都可，逗号相当于或/ @media screen, print { body { line-height: 1.2; } }

/* 多种条件组合：限定媒体类型为 screen，且限定设备可见区域尺寸[320px,480px], 且分辨率是每英寸点数为 150 */ @media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) { body { line-height: 1.4; } } ```