CSS的Media Queries

2024-02-12

2024-02-13

Css

Media Queries（媒体查询）

在实际中，媒体类型有近十种之多，但常用的只有几种。媒体类型的引用方法也有多种，常见的有：link 标签、@import 和 CSS3 新增的 @media。

link 方法

使用 link 方法引入媒体类型是在 <link> 标签中引用样式时，通过 link 标签的 media 属性来指定不同的媒体类型。示例如下：

1 2	<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />

@import 方法

@import 可以用来引用样式文件，同样也可以用来引用媒体类型。@import 引入媒体类型有两种方式。一种是在样式中通过 @import 调用另一个样式文件，另一种方法是在 <head></head> 标签中的 <style></style> 中引入。但是这种使用方法在 IE6/7 都不被支持。示例如下：

1 2	@import url(reset.css) screen; @import url(print.css) print;

在 <head> 中的 <style> 标签中引入媒体类型的方法如下：

<head>
  <style type="text/css">
    @import url(style.css) all;
  </style>
</head>

@media 方法

@media 是 CSS3 中引入的一个特性，被称为媒体查询。可以通过 @media 属性在页面中引入媒体类型。@media 引入媒体类型和 @import 有些类似，也具有两种方式。

在样式文件中引用媒体类型：

@media screen {
  选择器 {
    /* 你的样式代码写在这里 */
  }
}

使用 @media 引入媒体类型的方式是在 <head> 标签中的 <style> 中引用。

Media Queries 使用方法

了解完这些概念性的东西后，最想知道的是 Media Queries 如何使用。下面我们一起来探讨其使用方法：

Media Queries 能在不同的条件下使用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。前面简单介绍了 Media Queries 如何引用到项目中，但是 Media Queries 有其自己的使用规则。具体来说，Media Queries 的使用方法如下：

1
2
3

@media 媒体类型 and （媒体特性） {
  你的样式
}

注意：使用 Media Queries 必须以 @media 开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，这两个部分之间使用冒号分隔。例如：

1	(max-width: 480px)

从前面的表中可以得知，主要有十种媒体类型和 13 种媒体特性，将其组合就类似于不同的 CSS 集合。但与 CSS 属性不同的是，媒体特性是通过 min/max 来表示大于等于或小于作为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。

接下来我们来看一下 Media Queries 在实际项目中常用的方式。

最大宽度 max-width

“max-width”是媒体查询中最常用的一个特性。它表示当媒体类型的宽度小于或等于指定宽度时，应用样式。

例如：

1
2
3

@media screen and (max-width:480px){
    .ads { display:none; }
}

上述代码表示当屏幕宽度小于或等于480px时，页面中的广告区块（.ads）将被隐藏。

最小宽度 min-width

“min-width”与”max-width”相反，它表示当媒体类型的宽度大于或等于指定宽度时，应用样式。

例如：

1
2
3

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

上述代码表示当屏幕宽度大于或等于900px时，容器.wrapper的宽度为980px。

多个媒体特性使用

媒体查询可以使用关键词”and”将多个媒体特性结合在一起。一个媒体查询可以包含0到多个表达式，每个表达式可以包含0到多个关键字和一个媒体类型。

例如，当屏幕宽度在600px到900px之间时，将body的背景色设置为#f5f5f5：

1
2
3

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

设备屏幕的输出宽度 Device Width

在智能设备（如iPhone、iPad）上，可以根据屏幕设备的尺寸设置相应的样式或调用样式文件。可以使用”min-device-width”或”max-device-width”来指定屏幕设备的最小或最大宽度。

例如：

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

上述代码表示”iphone.css”样式文件适用于最大设备宽度为480px的设备，例如iPhone的显示。这里的”max-device-width”指的是设备的实际分辨率，即可视面积分辨率。

not关键词

使用关键词”not”可以排除某种指定的媒体类型，即对符合表达式的设备执行取反操作。

例如：

1
2
3

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

上述代码表示样式代码将应用于除打印设备和宽度小于1200px的所有设备中。

only关键词

“only”关键词用于指定特定的媒体类型，并可以用于排除不支持媒体查询的浏览器。它可以用于隐藏样式表对于不支持媒体查询但支持媒体类型的设备。

它的使用方式主要有以下几种：

对于支持媒体特性的设备，正常调用样式，此时忽略”only”关键词。
对于不支持媒体特性但支持媒体类型的设备，不读取样式，因为它会先读取”only”而不是”screen”。
对于不支持媒体查询的浏览器，无论是否支持”only”，样式都不会被采用。

例如：

1	<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

在上述代码中，”android240.css”样式文件仅适用于最大设备宽度为240px的屏幕设备，如Android上的显示。

如果在媒体查询中没有明确指定媒体类型，默认为”all”，例如：

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

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

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

上述代码中，”style.css”样式文件将应用于宽度小于或等于480px的手持设备或宽度大于或等于960px的屏幕设备。

目前为止，CSS3媒体查询在大多数现代浏览器中得到了广泛支持，除了IE6-8浏览器不支持之外。需要注意的是，其他浏览器对于媒体查询的支持并不需要添加浏览器前缀，与其他CSS3属性不同。

Technology

Media Queries（媒体查询）

link 方法

@import 方法

@media 方法

Media Queries 使用方法