媒体查询使用方法
媒体查询 (Media Queries) 是一种灵活且强大的 CSS 技术，它允许开发者根据不同的设备和屏幕尺寸来调整网页的布局和样式。通过媒体查询，你可以针对特定的设备类型（如桌面电脑、平板电脑或手机）或屏幕尺寸（如特定的宽度和高度）应用不同的 CSS 规则。这有助于创建响应式设计，即能够自动适应不同设备和屏幕尺寸的网页。
以下是一些常用的媒体查询示例：
1. 为所有屏幕和设备设置基本样式：
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
```
2. 使用媒体查询为桌面电脑设置不同的样式：
```css
@media screen and (min-width: 768px) {
body {
font-size: 18px;
}
}
```
在这个例子中，我们使用了 `@media screen and (min-width: 768px)` 这个媒体查询条件，它表示如果屏幕宽度至少为 768 像素，则应用这里的 CSS 规则。在这个例子中，我们将字体大小设置为 18 像素。
3. 使用媒体查询为移动设备设置不同的样式：
```css
@media screen and (max-width: 767px) {
body {
font-size: 14px;
}
}
```
在这个例子中，我们使用了 `@media screen and (max-width: 767px)` 这个媒体查询条件，它表示如果屏幕宽度小于或等于 767 像素，则应用这里的 CSS 规则。在这个例子中，我们将字体大小设置为 14 像素。
4. 使用媒体查询为触摸屏设备设置不同的样式：
```css
@media screen and (max-width: 767px) and (orientation: portrait) {
body {
font-size: 12px;
}
}
```
在这个例子中，我们使用了两个媒体查询条件。第一个条件是 `@media screen and (max-width: 767px)`，表示如果屏幕宽度小于或等于 767 像素，则应用这里的 CSS 规则。第二个条件是 `@media screen and (orientation: portrait)`，表示如果屏幕方向是纵向，则应用这里的 CSS 规则。在这个例子中，我们将字体大小设置为 12 像素。
5. 使用媒体查询为打印网页设置不同的样式：
```css
@media print {
body {
font-size: 12px;
background-color: #fff;
}
/* 在这里添加针对打印机的特定样式 */
}
```
这个例子中，我们使用了 `@media print` 这个媒体查询条件，它表示如果当前是打印模式，则应用这里的 CSS 规则。在这个例子中，我们将字体大小设置为 12 像素，并将背景颜色设置为白色。
通过使用媒体查询，你可以根据不同的设备和屏幕尺寸轻松地调整网页的布局和样式。这有助于创建更加友好和易于使用的网页设计，同时提高用户体验。