媒体查询基础
媒体查询 (Media Queries) 是CSS中的一种功能，允许开发者根据不同的条件和属性来选择并应用样式。媒体查询使得开发者能够基于设备的特性（例如屏幕宽度、分辨率和设备类型等）来调整网页的布局和外观。这是实现响应式设计的关键技术之一。
在HTML文档中，媒体查询的语法如下：
```css
@media screen and (max-width: 600px) {
/* 在屏幕宽度小于600px的设备上应用的样式 */
}
```
上面的代码示例表示：如果页面在屏幕宽度小于600px的设备上加载，那么将应用这里的样式。媒体查询可以包含多个条件，每个条件之间用逗号分隔。并且，媒体查询可以相互嵌套，这意味着可以基于更复杂的条件来应用样式。
以下是一些常用的媒体查询属性和它们的功能：
1. `screen`：指定媒体类型为屏幕，这是媒体查询的默认值。
2. `print`：指定媒体类型为打印。
3. `speech`：指定媒体类型为口语（朗读），适用于语音浏览器。
4. `color`：指定颜色相关的样式，例如 `color: red;`。
5. `background-color`：指定背景颜色相关的样式。
6. `font-family`：指定字体相关的样式。
7. `font-size`：指定字体大小相关的样式。
8. `margin`：指定边距相关的样式。
9. `padding`：指定内边距相关的样式。
10. `border`：指定边框相关的样式。
11. `width` 和 `height`：指定元素宽度和高度相关的样式。
12. `opacity`：指定元素的透明度。
媒体查询的使用示例：
```css
/* 如果屏幕宽度小于600px，则应用以下样式 */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
}
```
在这个示例中，当页面宽度小于600px时，body元素的字体大小将变为14px，而h1元素的字体大小将变为24px。
媒体查询可以与CSS的`@import`指令结合使用，从而实现更高级的样式定制。例如：
```css
@import url('styles.css') (min-width: 600px) and (max-width: 1024px);
/* 在屏幕宽度在600px到1024px之间的设备上应用的样式 */
```
总的来说，媒体查询为CSS提供了强大的灵活性，使得开发者能够根据不同设备的特性来定制网页的布局和外观，从而实现响应式设计。这对于创建适应各种屏幕尺寸和设备的网站和应用程序至关重要。