CSS 是在 Web 开发中用来控制页面样式的语言，它可以帮助我们更好的布局、美化页面，并且可以通过 media 值设置样式在不同设备上的呈现效果。在本文中，我们将学习如何指定 CSS 样式表的媒体依赖项。
1. 什么是 CSS 媒体查询
CSS 媒体查询是 CSS 控制器的一部分，它可以让 CSS 根据特定的条件选择不同的样式规则。在 web 开发中，媒体查询通常用于根据屏幕大小、宽度、高度等来调整页面样式，以适应不同的设备和窗口大小。
1.1 媒体类型
在媒体查询中，可以使用如下媒体类型之一：
- all：适用于所有设备。
- print：适用于打印页面。
- screen：适用于计算机屏幕、平板、智能手机等可视化屏幕。
- speech：适用于屏幕阅读器等语音合成设备。
1.2 媒体特性
除了媒体类型外，媒体查询还可以使用媒体特性，用于根据设备屏幕的参数进行样式调节。媒体特性包括：
- width：指定设备屏幕的宽度，单位为 px。
- height：指定设备屏幕的高度，单位为 px。
- device-width：指定设备屏幕的宽度，单位为 px。
- device-height：指定设备屏幕的高度，单位为 px。
- orientation：指定设备屏幕的方向， 可以是 portrait 或 landscape。
- aspect-ratio：设备屏幕的长宽比，比如 16/9。
- color、color-index 和 monochrome：分别指定设备颜色、颜色索引和黑白模式的值。
- resolution：指定设备的分辨率。
2. CSS 样式表的媒体依赖项
在实际开发中，我们通常会使用链接样式表的方式为页面添加 CSS 样式。如果要在不同媒体条件下应用不同的样式，就需要设置 CSS 样式表的媒体依赖项。
指定 CSS 样式表的媒体依赖项有两种方式：
- 使用 media 属性在链接样式表时指定；
- 在样式表中使用 @media 规则。
2.1 通过 media 属性指定媒体类型
使用 media 属性在链接样式表时指定媒体类型，这样可以在不同的屏幕和设备上使用不同的样式表。例如：
<link rel="stylesheet" media="screen and (min-width: 768px)" href="style.css">
<link rel="stylesheet" media="print" href="print.css">
以上的样式表在以下情况下生效：
- 第一个样式表，如果屏幕的最小宽度大于等于 768px，就会应用 style.css。
- 第二个样式表，如果进行打印操作，就会应用 print.css。
2.2 通过 @media 规则指定媒体条件
@media 规则是用于在样式表中指定不同媒体条件下应用的 CSS 规则，它的语法如下：
@media mediatype and (feature:value) {
/* CSS 规则 */
}
其中，mediatype 是媒体类型，feature:value 定义媒体特性和值，CSS 规则是应用在匹配媒体条件下的样式。例如：
@media screen and (min-width: 768px) {
body {
background-color: #f1f1f1;
}
}
以上样式表在屏幕宽度大于等于 768px 时，应用 body 元素的背景颜色为 #f1f1f1。
3. 怎样写好媒体查询的 CSS 样式表
在写媒体查询的 CSS 样式表时，需要遵循以下几点：
- 先指定全局样式，再指定媒体条件下的样式。
- 使用 @media 规则时，应按媒体条件逐层进行定义。
- 使用 em 或 rem 作为单位进行响应式设计，避免在不同设备上产生不同的样式效果。
- 测试样式的效果，验证页面在不同媒体条件下的样式。
3.1 先指定全局样式，再指定媒体条件下的样式
在进行媒体查询时，应当先添加全局样式，再添加媒体条件下的样式。这样可以确保在特定设备和屏幕下，元素的样式符合全局样式规则。例如：
/* 全局样式 */
body {
font-family: Arial, sans-serif;
}
/* 媒体查询样式 */
@media screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
上述样式表中先指定了全局样式，然后在屏幕宽度大于等于 768px 的情况下，设置 body 的字体大小为 16px。
3.2 按媒体条件逐层进行定义
在编写媒体查询样式表时，应按照媒体条件逐层进行定义，即从最小的屏幕尺寸开始，逐步调整样式至大屏幕。例如：
/* 全局样式 */
body {
font-family: Arial, sans-serif;
}
/* 媒体查询样式 */
@media screen and (min-width: 320px) {
body {
font-size: 12px;
}
}
@media screen and (min-width: 480px) {
body {
font-size: 14px;
}
}
@media screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
@media screen and (min-width: 992px) {
body {
font-size: 18px;
}
}
以上样式表在不同屏幕宽度下，设置 body 元素的字体大小。
3.3 使用 em 或 rem 作为单位
使用 em 或 rem 作为单位进行响应式设计，可以避免在不同设备上产生不同的样式效果。在样式表中使用 em 或 rem 代替 px 作为单位，以便根据浏览器的“根元素”设置调整样式的大小。例如：
/* 全局样式 */
html {
font-size: 16px;
}
/* 媒体查询样式 */
@media screen and (min-width: 768px) {
body {
font-size: 1.25em;
}
h1 {
font-size: 3rem;
}
}
@media screen and (min-width: 992px) {
body {
font-size: 1.5em;
}
h1 {
font-size: 4rem;
}
}
在样式表中，我们首先设置根元素的字体大小，然后在响应式样式中使用 em 和 rem 作为字体大小的单位，这样可以确保在不同屏幕和设备上样式的呈现效果一致。
3.4 测试样式的效果
在编写媒体查询样式表时，最好在多个设备和浏览器上进行测试，以确保所有样式都能按预期呈现。可以使用模拟器或在真实设备上进行测试，确认样式表能够在针对不同媒体条件下正确工作。
4. 总结
CSS 媒体查询是一种针对不同设备和媒体条件设置的样式方法，它可以让我们构建响应式设计的网页，并且在不同的屏幕和设备上产生一致的样式效果。在编写媒体查询样式表时，需要先指定全局样式，按媒体条件逐层进行定义，在样式表中使用 em 或 rem 作为单位进行响应式设计，并在多个设备和浏览器上验证样式的效果，以确保样式表能够在不同媒体条件下正确工作。