媒体查询实例
媒体查询 (Media Queries) 是一种灵活且强大的 CSS 技术，它允许开发者根据不同的设备和屏幕尺寸来调整网页的布局和样式。通过媒体查询，我们可以根据设备的特性（如屏幕宽度、分辨率和设备类型）来应用不同的 CSS 规则，从而实现响应式设计。
以下是一个简单的媒体查询实例：
```css
/* 默认情况下，适用于所有桌面和移动设备 */
body {
font-size: 16px;
}
/* 如果屏幕宽度小于或等于 768 像素，则应用以下规则 */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 如果屏幕宽度小于或等于 480 像素，则应用以下规则 */
@media screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
```
在上面的例子中，我们首先定义了默认的 CSS 规则，适用于所有桌面和移动设备。然后，我们使用媒体查询针对屏幕宽度小于或等于 768 像素的情况应用了新的字体大小规则。最后，我们再次使用媒体查询针对屏幕宽度小于或等于 480 像素的情况应用了更小的字体大小规则。
通过这种方式，我们可以根据设备的特性来定制网页的布局和样式，从而提供更好的用户体验。媒体查询可以与其他 CSS 技术（如 Flexbox 和 Grid）结合使用，以实现更复杂的响应式设计。
媒体查询的基本语法如下：
```css
@media screen and (condition) {
/* 在满足条件时应用的 CSS 规则 */
}
```
其中，`screen` 表示媒体查询适用于屏幕设备，`and` 表示条件之间是“与”的关系，`condition` 表示媒体查询的条件。条件可以是多种多样的，例如屏幕宽度、分辨率、设备类型等。可以使用括号将条件括起来，以便更好地控制优先级。
在媒体查询中，可以使用各种单位来指定条件的值，例如像素、百分比、em 等。此外，还可以使用 `not`、`only` 和 `only-child` 等关键字来表示否定选择器、仅适用于特定元素的筛选器以及仅应用于子元素的选择器。
总之，媒体查询是一种非常实用的 CSS 技术，它可以帮助我们实现响应式设计，根据设备的特性来定制网页的布局和样式。通过掌握媒体查询的基本语法和常用的技巧，我们可以更好地利用这一技术来打造出色的用户体验。