CSS响应式布局是指在网页设计中，能够根据屏幕尺寸、分辨率等因素，实现自适应页面布局的技术。使用CSS媒体查询可以实现响应式布局。

媒体查询是指用于针对不同的媒体类型设置不同的样式规则，以实现不同的视觉效果。在响应式布局中，通过媒体查询来针对不同的屏幕尺寸设置不同的样式规则，从而实现页面的自适应布局。

/*媒体查询样式模板*/
@media 媒体类型 and (媒体特性){
//样式规则
}

其中，“媒体类型”指的是不同的输出设备，如屏幕、打印机等；“媒体特性”指的是设备的属性，如宽度、高度、分辨率等。

/*根据屏幕宽度设置不同的CSS样式*/
@media screen and (max-width: 768px){
//样式规则
}
/*根据设备宽度设置不同的CSS样式*/
@media handheld and (min-width: 480px){
//样式规则
}

通过使用媒体查询，我们可以实现基于不同设备属性的响应式布局。例如，在屏幕宽度小于768px时，可以设置菜单栏自适应折叠；在设备宽度大于480px时，可以设置图片大小自适应缩放。

总之，媒体查询是实现响应式布局不可或缺的一部分。熟练掌握媒体查询的用法，可以帮助我们有效地优化页面设计，提升用户体验。