媒体查询详解

引言

媒体查询是 CSS3 的一个新的技术，它使我们可以针对不同的设备（或者说，不同的屏幕尺寸和分辨率）来应用不同的样式。

媒体查询包含一个媒体类型和至少一个使用宽度、高度、颜色等条件限制的表达式。CSS 用于桌面电脑的屏幕可能在平板电脑、手机、黑白打印机以及非视觉网络浏览器上并不适用。相反，设计师可能要用一种软件解决方案来满足既多样又具有挑战性的需求。

当您调整浏览器窗口的大小，媒体查询可以使网页布局动态地改变。这是制作响应式网页设计的关键工具。

示例：

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

以上 CSS 代码表示: 如果浏览器窗口的宽度（viewport）等于或小于 600px，那么 body 的背景颜色将变为浅蓝色。

一、媒体类型

CSS中的媒体查询主要有以下媒体类型：

1. all: 适用于所有设备。
2. print: 主要用于打印机和打印预览模式。
3. screen: 主要用于电脑屏幕、平板、智能手机等。
4. speech: 适用于基于语音识别的设备。

这几种媒体类型的主要作用是根据设备的类型来应用不同的样式规则，使得网站或网页能在不同设备上有良好的显示效果。

举例说明：

@media print {body { font-size: 10pt; }
}@media screen {body { font-size: 13px; }
}@media screen, print {body { line-height: 1.2; }
}

上述代码中，定义了三组 CSS 规则。
第一组是适用于打印机或打印预览模式的，其所定义的样式将在打印界面中生效。
第二组是适用于电脑屏幕和智能手机等设备的，其所定义的样式将在这些设备的显示界面中生效。
第三组同时适用于屏幕和打印界面，其所定义的样式在两种界面都会生效。

二、媒体特性

媒体查询中的媒体特性主要包括以下几种：

1. width and height：这两个特性主要用于描述设备显示区域的宽度和高度，可以用来调整不同设备下的网页布局。例如：

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

以上CSS规则表示，当设备的屏幕宽度小于或等于600px时，网页背景颜色变为浅蓝色。

2. orientation：描述设备的方向，值可以是portrait（竖屏）或landscape（横屏）。例如：

@media screen and (orientation: portrait) {body {font-size: 1.2em;}
}

以上CSS规则表示，当设备处于竖屏状态时，网页字体变为1.2em。

3. device-width and device-height：这两个特性用于描述设备的物理尺寸。例如：

@media screen and (min-device-width: 1200px) {body {margin: 0 auto;width: 1200px;}
}

以上CSS规则表示，若设备的物理屏幕宽度大于或等于1200px，网页主体将居中显示，并且宽度恒定为1200px。

4. resolution：描述设备的分辨率。例如：

@media print and (min-resolution: 300dpi) {body {font-size: 12pt;}
}

以上CSS规则表示，如果设备的打印分辨率至少为300 dot per inch，网页字体变为12pt。

5. aspect-ratio and device-aspect-ratio：前者描述的是显示区域的宽高比，后者描述设备物理屏幕的宽高比。例如：

@media screen and (aspect-ratio: 16/9) {body {background: url('widescreen-bg.jpg');}
}

以上CSS规则表示，如果设备的显示区域的宽高比是16:9，那么网页背景图设为widescreen-bg.jpg。

以上就是媒体查询中常用的媒体特性以及它们的用途。

三、逻辑操作符

在CSS中，媒体查询使用逻辑操作符来组合不同的媒体类型和条件。以下是常见的逻辑操作符：

1. and：使用 and 操作符可以同时匹配多个条件。例如：

@media screen and (min-width: 768px) and (max-width: 1024px) {/* 这里是一些规则 */
}

上面的代码表示只有在屏幕宽度在 768px 和 1024px 之间时才会应用这些规则。

2. or：使用 or 操作符可以匹配其中一个条件。例如：

@media (color) or (color-index) {/* 这里是一些规则 */
}

上面的代码表示只要设备支持颜色或颜色索引，就会应用这些规则。

3. not：使用 not 操作符可以排除某个条件。例如：

@media not screen {/* 这里是一些规则 */
}

上面的代码表示只有在非屏幕设备上才会应用这些规则。

4. only：使用only操作符，可以隐藏样式表不会被旧的浏览器应用。这是因为老的浏览器不支持媒体查询，它们会忽略only关键字和后面的所有表达，而新的浏览器会把它作为普通的媒体查询来处理。例如：

@media only screen and (min-width: 600px) {.sidebar {display: block;}
}

在这个例子中，只有设备类型为屏幕并且视口的最小宽度为600px时，侧边栏才显示，并且这个样式只会被支持媒体查询的浏览器应用。

应用这些操作符，可以让开发者根据不同的媒体条件来设计多种布局和样式，实现响应式设计和优化用户体验。例如：

1. 在移动端和桌面端显示不同的导航菜单：

@media screen and (max-width: 768px) {/* 移动端 */.menu {display: none;}.mobile-menu {display: block;}
}@media screen and (min-width: 769px) {/* 桌面端 */.menu {display: block;}.mobile-menu {display: none;}
}

2. 在打印时隐藏某些元素：

@media print {.print-hidden {display: none;}
}

3. 根据屏幕大小和朝向应用不同的背景图像：

@media screen and (orientation: portrait) {.bg-image {background-image: url(portrait.jpg);}
}@media screen and (orientation: landscape) {.bg-image {background-image: url(landscape.jpg);}
}

四、link方式引入

媒体查询可以使用link标签方便地引入：

<link rel="stylesheet" media="(max-width: 768px)" href="example.css">

上述代码的作用是在浏览器视口宽度小于或等于768px时，应用example.css样式表。

注意事项：

1. 媒体查询的条件必须包含在media属性中。基于设备特征的媒体查询，如空格、冒号和括号等，必须使用引号。

2. link标签的href属性中放置的是具有相关媒体查询样式的css样式表路径，这个路径可以是相对路径或绝对路径。

3. 浏览器无法理解或支持媒体查询的情况下，会无视media特性并加载样式表。

4. 在使用的过程中如果有多个css文件，文件多了会影响性能，尽量将多个css文件合并为一个来引入。各个不同的CSS规则会按照不同的设备特性来应用。

5. 使用媒体查询时一定要确保网站或应用可以在没有外部CSS文件的情况下正常工作。这样做将增强功能的稳健性，并优化根据设备特性应用样式的变化。

6. 注意link标签的放置位置，一般是放置在head标签内部。

五、编写位置及顺序

媒体查询通常放在 CSS 文件的底部，或在每个 CSS 规则集后面，具体取决于逻辑和项目结构。重要的是，它们应该放在相关规则集的附近，使其易于寻找并理解上下文。

媒体查询的顺序也很重要。通常，你应该先进行一般的样式设置，然后再按照屏幕或设备的大小从小到大进行媒体查询的设置。这是由于 CSS 的层叠规则，后写的样式会覆盖先写的样式。所以当你在屏幕尺寸变大时，需要更改的样式应该在后面。

例如：

/* 通用样式 */
body {background-color: white;color: black;
}/* 小设备（小于600px） */
@media only screen and (max-width: 600px) {body {background-color: blue;}
}/* 中等设备（601px至768px） */
@media only screen and (min-width: 601px) and (max-width: 768px) {body {background-color: green;}
}/* 大设备（769px及以上） */
@media only screen and (min-width: 769px) {body {background-color: red;}
}

在上面的例子中，随着设备宽度的增大，背景色会从蓝色变为绿色，然后变为红色。这是因为后写的媒体查询会覆盖先写的媒体查询。

六、响应阈值设定

媒体查询的响应断点的阈值设定通常是基于常见设备的屏幕尺寸进行设定的，但无固定标准，主要看项目需求和目标用户的设备种类。

以下是一些常见的设备断点：

• 小于 768px: 适用于手机及小屏设备。
• 768px 至 1024px: 适用于平板电脑和小屏电脑设备。
• 大于 1024px: 适用于大屏电脑和电视等设备。

例如：

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

在这些阈值下，网页的布局、字体大小等都可能需要相应地进行调整，以提供最佳的用户体验。

然而，仅仅考虑设备尺寸是不够的，也需要考虑视口尺寸、屏幕解析度、设备方向等多个因素。切忌直接拘泥于某些设备的尺寸，应该考虑的是如何构建能够灵活适应各种情况的布局。因此有时候，根据设计的具体内容和项目需求来设定断点可能会更好些。

总结

总的来说，媒体查询是CSS3中强大的一个功能，它能够让我们根据不同的设备特性来应用不同的样式，从而实现了响应式网页设计的基础。通过本文的详细解读，我们应该明白了如何利用媒体查询来对移动设备、桌面设备、不同分辨率的设备进行样式的调整。希望本文能对你理解和使用媒体查询提供帮助，也希望你能在实际项目中灵活运用，打造适配各种设备的优秀网页设计。在未来的网页设计道路上，他会是你的重要伙伴。