媒体查询案例
媒体查询（Media Queries）是一种CSS中用于选择和展示不同HTML元素的样式的语言。通过媒体查询，开发人员可以基于某些条件（如屏幕宽度、分辨率和设备类型等）来指定元素的样式。这使得网站能够自适应不同的设备和屏幕尺寸，从而提供更好的用户体验。
以下是一个简单的媒体查询示例：
```css
/* 默认情况下，适用于所有屏幕和设备 */
body {
font-size: 16px;
}
/* 如果屏幕宽度小于或等于768像素，则应用以下样式 */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
```
在这个例子中，我们首先定义了默认的样式，适用于所有屏幕和设备。然后，我们使用媒体查询来指定在屏幕宽度小于或等于768像素的情况下，将字体大小从16px更改为14px。
媒体查询可以包含多个条件，每个条件之间用逗号分隔。例如：
```css
/* 如果屏幕宽度小于或等于768像素，并且设备是平板或手机，则应用以下样式 */
@media screen and (max-width: 768px) and (min-device-width : 769px) {
body {
font-size: 12px;
}
}
```
在这个例子中，我们添加了一个新的条件，只有当屏幕宽度小于或等于768像素，并且设备是平板或手机时，才会应用这个样式。这里使用了`min-device-width`来指定设备的屏幕宽度，而不是像之前那样使用`max-width`来指定屏幕宽度。
媒体查询的应用非常广泛，可以用于控制页面上各种元素的显示方式，包括布局、字体、颜色、背景等。通过使用媒体查询，开发人员可以创建出更加灵活和适应性强的网站，从而满足不同用户的需求和设备环境。
在实际应用中，媒体查询通常与CSS的`@media`规则一起使用。`@media`规则允许开发人员根据特定的条件来定义网页元素的样式。例如：
```css
/* 定义媒体查询，当屏幕宽度大于768px时应用以下样式 */
@media screen and (min-width: 769px) {
body {
font-size: 18px;
}
}
```
在这个例子中，我们定义了一个新的媒体查询，当屏幕宽度大于768像素时，会应用这个样式。这里的样式与之前的例子相似，只是将字体大小从16px更改为18px。
总之，媒体查询是一种强大的工具，它允许开发人员根据不同的设备和屏幕尺寸来定制网页的样式。通过合理地使用媒体查询，可以创建出更加响应式和用户友好的网站。