CSS3的media query是用于响应式网页设计中的重要技术，它允许开发者为不同媒体类型定义特定的样式规则，以适配不同设备的屏幕尺寸、分辨率、方向等因素。以下是对CSS3 media query学习攻略的详细知识点梳理。
media query的基本构成包括媒体类型（mediatype）和媒体特性（mediafeature），以及可选的逻辑运算符。媒体类型可以指定为all、screen、print等，用于指定媒体查询适用的设备类型。如果没有明确指定媒体类型，则默认为all。媒体特性则是一些可以被测试的特性，例如屏幕的宽度（min-width）、高度（min-height）、屏幕方向（orientation）等。
media query的基本语法是这样的：
```css
@media media-type and (media-feature) {
/* 样式规则 */
}
```
在媒体查询中，可以使用逻辑运算符来组合媒体特性或媒体类型，包括：
- `and`：用于组合多个条件，只有当所有条件都为真时，media query才为真。
- `not`：用于对整个media query的结果取反，必须位于media query的开头，可以用来排除特定的媒体类型或特性。
- `only`：用于向早期浏览器隐藏媒体查询，位于media query的开头，能确保只有支持media query的浏览器应用特定的样式规则。
逗号运算符（`,`）则用于结合多个media query，只要其中一个为真，整个media query就为真。它相当于逻辑运算符中的“或”（or）。
以下是一些具体的media query示例和使用场景：
1. 根据屏幕宽度应用样式规则：
```css
@media (min-width: 700px) {
/* 当屏幕宽度至少为700像素时，应用这里的CSS规则 */
}
```
2. 同时根据屏幕宽度和方向应用样式规则：
```css
@media screen and (min-width: 700px) and (orientation: landscape) {
/* 当屏幕宽度至少为700像素且屏幕为横向时，应用这里的CSS规则 */
}
```
3. 使用逗号运算符结合多个media query，适用于不同屏幕宽度或方向：
```css
@media screen and (min-width: 700px), screen and (orientation: landscape) {
/* 当屏幕宽度至少为700像素或屏幕为横向时，应用这里的CSS规则 */
}
```
4. 使用`not`运算符排除不支持media query的浏览器：
```css
@media not all and (min-resolution: 0.001dpcm) {
/* 该规则不会被不支持media query的浏览器应用 */
}
```
5. 使用`only`运算符来隐藏样式规则，使其不被早期浏览器识别：
```css
@media only screen and (max-width: 600px) {
/* 早期浏览器会忽略这个media query */
}
```
值得注意的是，IE6-8等旧版浏览器不支持media query的特性，因此它们将无法应用相应的样式规则。而像IE9这样的浏览器虽然支持，但对逗号分割的媒体类型列表支持不完整，可能无法正确解析和应用媒体查询。
媒体查询对于响应式设计至关重要，因为它们可以根据用户的设备条件动态地加载样式。这对于确保网页在不同设备上均能提供良好的用户体验至关重要。通过合理设计media query，设计师和前端开发人员可以创建适应各种屏幕大小的布局，并通过优化内容的显示来增强可用性和可访问性。
