新手小白如何详细的使用CSS媒体查询(@media)全面解析

随着移动设备的迅速普及,越来越多的用户使用智能手机、平板电脑或其他设备浏览Web内容,而不是只在传统的计算机系统上浏览Web内容。 为了让使用各种设备的用户有良好的体验,需要进行媒体搜索。

媒体查询是CSS样式表中最重要的功能之一,媒体查询根据媒体类型(设备类型)和条件区分不同的设备(计算机、移动电话、平板电脑、盲文设备等),分别为 通过媒体查询,CSS可以更准确地针对不同设备或同一设备的不同条件运行,从而使所有用户获得更好的用户体验。

1. 媒体类型

媒体类型用来表示设备的类别,CSS 中提供了一些关键字来表示不同的媒体类型,如下表所示:

媒体类型 描述
all 表示所有的媒体设备
aural 表示语音和音频合成器(听觉设备)
braille 表示盲人用点字法触觉回馈设备
embossed 表示盲人用点字法打印机
handheld 表示小型手持设备,如手机、平板电脑
print 表示打印机
projection 表示投影设备
screen 表示电脑显示器
tty 表示使用固定密度字母栅格的媒体,比如打字机或终端设备
tv 表示电视机类型的设备

2. 媒体特性

除了具体的类型外,还可以通过一些属性来描述设备的具体特征,例如宽度、高度、分辨率等,如下表所示:

描述
aspect-ratio 输出设备页面可见区域的宽高比
color 输出设备每个像素的比特值,常见的有 8、16、32 位。如果设备不支持输出彩色,则该值为 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 输出设备单色帧缓冲区中每个像素的最大位深度。如果设备并非黑白屏幕,则该值为 0
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 输出设备单色帧缓冲区中每个像素的最小位深度。如果设备并非黑白屏幕,则该值为 0
min-resolution 设备的最小分辨率
min-width 页面可见区域的最小宽度
monochrome 输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕,则该值为 0
orientation 页面可见区域的旋转方向
resolution 设备的分辨率。如:96dpi、300dpi、118dpcm
scan 电视类设备的扫描工序
width 页面可见区域的宽度

3. 逻辑操作符

逻辑操作符包含 not、and 和 only 三个,通过逻辑操作符可以构建复杂的媒体查询,您还可以通过逗号来分隔多个媒体查询,将它们组合为一个规则。

  • and:用于将多个媒体查询组合成一条媒体查询,当每个查询规则都为真时则该条媒体查询为真,另外通过 and 操作符还可以将媒体特性与媒体类型结合在一起;
  • not:用于否定媒体查询,当查询规则不为真时则返回 true,否则返回 false。如果使用 not 操作符,则还必须指定媒体类型;
  • only:仅在整个查询匹配时才会生效,当不使用 only 时,旧版的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen,忽略查询的其余部分,并将样式应用于所有屏幕。 如果使用 only 运算符,则还必须指定媒体类型。

4. 定义媒体查询

目前您可以通过以下两种方式来定义媒体查询:

  • 使用 @media 或 @import 规则在样式表中指定对应的设备类型;
  • 用 media 属性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定的设备类型。

1) @media

在《CSS @规则》一节中我们已经简单了解 @media,使用 @media 您可以指定一组媒体查询和一个 CSS 样式块,当且仅当媒体查询与正在使用的设备匹配时,指定的 CSS 样式才会应用于文档。示例代码如下:

  1. /* 在小于或等于 992 像素的屏幕上,将背景色设置为蓝色 */
  2. @media screen and (maxwidth: 992px) {
  3. body {
  4. background-color: blue;
  5. }
  6. }
  7.  
  8. /* 在 600 像素或更小的屏幕上,将背景色设置为橄榄色 */
  9. @media screen and (maxwidth: 600px) {
  10. body {
  11. background-color: olive;
  12. }
  13. }

2) @import

@import 用来导入指定的外部样式文件并指定目标的媒体类型,示例代码如下:

  1. @import url(“css/screen.css) screen; /* 引入外部样式,该样式仅会应用于电脑显示器 */
  2. @import url(“css/print.css) print; /* 引入外部样式,该样式仅会应用于打印设备 */
  3. body {
  4. background: #f5f5f5;
  5. line-height: 1.2;
  6. }

注意:所有 @import 语句都必须出现在样式表的开头,而且在样式表中定义的样式会覆盖导入的外部样式表中冲突的样式。

3) media 属性

您还可以在 <style>、<link>、<source> 等标签的 media 属性中来定义媒体查询,示例代码如下:

  1. /* 当页面宽度大于等于 900 像素时应用该样式 */
  2. <link rel=“stylesheet” media=“screen and (minwidth: 900px)” href=“widescreen.css>
  3. /* 当页面宽度小于等于 600 像素时应用该样式 */
  4. <link rel=“stylesheet” media=“screen and (maxwidth: 600px)” href=“smallscreen.css>

提示:在 media 属性中您还可以指定多种媒体类型,每种媒体类型之间使用逗号进行分隔,例如 media=”screen, print”。

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容