媒体查询的实例
媒体查询 (Media Queries) 是一种灵活且强大的 CSS 技术，它允许开发者根据不同的设备和屏幕尺寸来调整网页的布局和样式。通过媒体查询，我们可以根据设备的特性（如屏幕宽度、分辨率和设备类型）为不同浏览器窗口应用不同的 CSS 规则。这使得网站能够自适应各种屏幕尺寸，从而提供最佳的用户体验。
以下是一个简单的媒体查询实例：
```css
/* Default styles for all devices */
body {
font-family: Arial, sans-serif;
}
/* Styles for screens with a max width of 768px, such as smartphones and small tablets */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
/* Styles for screens with a max width of 480px, such as small smartphones */
@media screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
```
在上面的示例中，我们首先定义了默认的 CSS 规则，适用于所有设备。然后，我们使用媒体查询针对屏幕宽度小于或等于 768px 的设备（例如智能手机和小型平板电脑）定义了特定的样式。最后，我们再次使用媒体查询针对屏幕宽度小于或等于 480px 的设备（例如小型智能手机）定义了额外的样式。
通过这种方式，我们可以根据设备的特性为不同的浏览器窗口应用不同的 CSS 规则，从而实现网页布局和样式的自定义。这有助于确保我们的网站在各种设备上都能提供最佳的浏览体验。