媒体查询示例
媒体查询（Media Query）是一种CSS（层叠样式表）技术，用于在不同的设备和窗口尺寸上应用不同的样式。通过媒体查询，开发人员可以创建响应式设计，使网站在不同屏幕尺寸和设备类型上保持良好的视觉和交互体验。
以下是一个简单的媒体查询示例：
```css
/* Default styles for all devices */
body {
font-family: Arial, sans-serif;
background-color: white;
}
/* 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;
}
}
```
在上面的示例中，我们首先定义了默认的样式，适用于所有设备。然后，我们使用媒体查询为屏幕宽度小于或等于768px的设备（如智能手机和小型平板电脑）定义了特定的样式。最后，我们为屏幕宽度小于或等于480px的设备（如小型智能手机）定义了另外的样式。
媒体查询的语法非常简单。在CSS选择器后面添加`@media`关键字，然后指定媒体条件的断点。在上面的示例中，我们使用了两个媒体查询，一个针对小于或等于768px的屏幕，另一个针对小于或等于480px的屏幕。
媒体查询可以包含许多不同的属性，例如字体大小、背景颜色、边距、填充、宽度、高度等。通过使用媒体查询，开发人员可以创建灵活的响应式设计，使网站能够适应各种设备和屏幕尺寸。
需要注意的是，媒体查询并不是唯一的响应式设计方法。另一种常用的方法是使用百分比单位来设置元素的宽度、高度和位置，以及使用弹性布局（flexbox）和网格布局（grid layout）等技术来创建响应式设计。
总之，媒体查询是一种强大的CSS技术，可以帮助开发人员创建灵活的响应式设计，使网站在不同设备和屏幕尺寸上保持良好的视觉和交互体验。