CSS的媒体查询：响应式布局的利器

媒体查询是CSS3中的一个功能，可以根据不同的设备特性（如屏幕宽度、分辨率、设备方向等）来应用不同的样式规则。媒体查询通常用于创建响应式布局，使得网页在不同的设备上都可以显示得非常合适，不仅可以适配桌面设备，还可以适配移动设备。

下面是一个简单的媒体查询示例，它将在屏幕宽度小于600px时，改变body的背景颜色为黄色：

/* 默认样式 */
body {
  background-color: lightblue;
}
 
/* 媒体查询：当屏幕宽度小于600px时应用以下样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: yellow;
  }
}

媒体查询可以用于更复杂的情况，例如根据屏幕宽度调整布局列数、字体大小、边距等。

/* 默认样式 */
.container {
  columns: 1;
  gap: 20px;
  font-size: 16px;
}
 
/* 媒体查询：当屏幕宽度大于800px时，调整为3列布局 */
@media screen and (min-width: 800px) {
  .container {
    columns: 3;
  }
}
 
/* 媒体查询：当屏幕宽度大于1200px时，调整字体大小 */
@media screen and (min-width: 1200px) {
  .container {
    font-size: 20px;
  }
}

媒体查询是创建响应式网页布局的强大工具，可以使网页在各种设备上都保持良好的用户体验。