媒体查询
媒体查询（Media Queries）是一种用于在CSS中针对不同媒体类型应用不同的样式的语言。通过媒体查询，开发者可以轻松地控制不同屏幕尺寸和设备特性下的页面表现。媒体查询的基本语法如下：
```css
@media screen and (max-width: 768px) {
/* 在屏幕宽度小于或等于768px的设备上应用的样式 */
}
@media print {
/* 在打印设备上应用的样式 */
}
```
以下是一些常见的媒体查询示例：
1. 媒体查询用于适应不同的屏幕尺寸：
```css
@media screen and (min-width: 769px) {
/* 在屏幕宽度大于768px的设备上应用的样式 */
}
@media screen and (max-width: 1024px) {
/* 在屏幕宽度在769px到1024px之间的设备上应用的样式 */
}
```
2. 媒体查询用于适应不同的设备类型：
```css
@media screen and (max-width: 600px) {
/* 在屏幕宽度小于或等于600px的设备上应用的样式，如手机或平板电脑 */
}
@media screen and (max-width: 1200px) {
/* 在屏幕宽度大于1200px的设备上应用的样式，如桌面电脑 */
}
```
3. 媒体查询用于适应不同的方向（例如，横向或纵向）：
```css
@media screen and (orientation: landscape) {
/* 在屏幕方向为横向的设备上应用的样式 */
}
@media screen and (orientation: portrait) {
/* 在屏幕方向为纵向的设备上应用的样式 */
}
```
4. 媒体查询用于处理特定的浏览器窗口大小或分辨率：
```css
@media screen and (min-resolution: 192dpi) {
/* 在分辨率大于或等于192dpi的设备上应用的样式，适用于高分辨率显示器 */
}
@media screen and (min-resolution: 2dppx) {
/* 在分辨率大于或等于2dppx的设备上应用的样式，适用于高分辨率显示器，如Retina显示屏 */
}
```
媒体查询可以与其他CSS规则结合使用，以创建响应式设计。通过使用媒体查询，开发者可以根据设备的特性和尺寸来调整页面的布局、字体、颜色等，从而提供最佳的用户体验。