Css3中如何使用媒体查询？响应式布局如何实现

媒体查询（Media Queries）是CSS3的一个功能，可以根据不同的设备特性如屏幕尺寸、分辨率等来应用不同的样式规则。使用媒体查询可以创建响应式布局，使得网页在不同设备上都能显示良好。

下面是一个简单的媒体查询示例，它会在屏幕宽度小于600px时应用样式规则：

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

响应式布局实现的关键是使用媒体查询和CSS的弹性盒子（Flexbox）或者网格（Grid）系统。下面是一个使用Flexbox的响应式布局示例：

/* 基本布局 */
.container {
  display: flex;
}
 
/* 默认情况下，所有子元素均等分配空间 */
.item {
  flex: 1;
  padding: 10px;
}
 
/* 在屏幕宽度小于600px时，子元素不均等分配空间，第一个占一半，第二个占全部 */
@media screen and (max-width: 600px) {
  .item:first-child {
    flex: 1;
  }
 
  .item:last-child {
    flex: 2;
  }
}

HTML结构：

<div class="container">
  <div class="item">第一个项目</div>
  <div class="item">第二个项目</div>
</div>

在这个例子中，.container 是一个弹性容器，.item 是其子元素。在屏幕宽度大于600px时，所有子元素平均分配容器空间，而当屏幕宽度小于600px时，第一个子元素占一半，第二个子元素占全部。这样就实现了响应式布局。