CSS媒体查询（@media）

媒体查询（Media Queries）是响应式网页设计中的重要工具，它允许您根据用户设备的不同特征，如屏幕宽度、屏幕分辨率、设备类型等，来应用不同的样式规则。

屏幕宽度适应：通过媒体查询可以根据屏幕宽度应用不同的样式。例如，在大屏幕上显示三列布局，在中等屏幕上显示两列布局，在小屏幕上显示单列布局。

/* 大屏幕样式 */
@media screen and (min-width: 1200px) {
  .column {
    width: 33.33%;
  }
}

/* 中等屏幕样式 */
@media screen and (max-width: 1199px) and (min-width: 768px) {
  .column {
    width: 50%;
  }
}

/* 小屏幕样式 */
@media screen and (max-width: 767px) {
  .column {
    width: 100%;
  }
}

设备类型适应：媒体查询还可以根据设备类型应用不同的样式。例如，您可以为移动设备和桌面设备分别设置不同的样式。

/* 移动设备样式 */
@media screen and (max-width: 767px) {
  /* 移动设备样式规则 */
}

/* 桌面设备样式 */
@media screen and (min-width: 768px) {
  /* 桌面设备样式规则 */
}

屏幕方向适应：媒体查询还可以根据屏幕方向（横向或纵向）应用不同的样式。例如，在横向屏幕上显示横向布局，在纵向屏幕上显示纵向布局。

/* 横向屏幕样式 */
@media screen and (orientation: landscape) {
  /* 横向屏幕样式规则 */
}

/* 纵向屏幕样式 */
@media screen and (orientation: portrait) {
  /* 纵向屏幕样式规则 */
}

分辨率适应：媒体查询还可以根据屏幕分辨率应用不同的样式。例如，您可以为高分辨率屏幕提供更高质量的图像。

/* 高分辨率屏幕样式 */
@media screen and (min-resolution: 300dpi) {
  /* 高分辨率屏幕样式规则 */
}

/* 低分辨率屏幕样式 */
@media screen and (max-resolution: 72dpi) {
  /* 低分辨率屏幕样式规则 */
}

 media 属性:在 <style>、<link>、<source> 等标签的 media 属性中来定义媒体查询。

/* 当页面宽度大于等于 815 像素时应用该样式 */
<link rel="stylesheet" media="screen and (min-width: 815px)" href="widescreen.css">
/* 当页面宽度小于等于 400像素时应用该样式 */
<link rel="stylesheet" media="screen and (max-width: 400px)" href="smallscreen.css">

总结：媒体查询可以根据屏幕大小和设备类型选择不同的样式表，以实现响应式设计。