CSS媒体查询是一个很有用的功能，它可以使得我们在不同设备上展示不同的样式。例如，当用户在手机上浏览网页时，我们可以通过媒体查询来检测屏幕宽度并使元素适配不同的样式。

媒体查询的语法如下：

@media mediatype and (media feature) {
CSS-代码...
}

其中mediatype可以是all（所有媒体类型）、screen（屏幕）、print（打印机等可打印媒介）等等。media feature可以是width（宽度）、height（高度）、orientation（方向，landscape或portrait）等等。CSS-代码是要在该媒体查询下应用的样式。

下面是一个简单的媒体查询的例子：

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}

这里我们为屏幕宽度小于600像素的情况下设置了一个不同的字体大小。这个媒体查询只在屏幕媒介下应用。

除了max-width等简单的条件，媒体查询还支持诸如min-width（大于等于某个宽度）、device-width（设备的宽度）、resolution（分辨率）、color（颜色位数）等等条件。这允许我们非常灵活地进行样式的设置。

媒体查询还支持多个条件的组合，例如：

@media screen and (max-width: 600px) and (orientation: portrait) {
/* 在竖屏且宽度小于等于600像素的情况下应用 */
}

总之，CSS媒体查询是一个十分强大的功能，可以帮助你在不同设备上展示不同的样式。它的语法简洁明了，使用起来也非常方便。