在 CSS 中使用媒体查询（Media Query）可以根据不同的屏幕大小、分辨率、设备类型等条件来实现不同的样式布局。使用媒体查询可以让网站在不同的设备上都能够呈现最佳的视觉效果。以下是一个简单的示例：
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}
/* 当屏幕宽度大于 768px 时，应用以下样式 */
@media screen and (min-width: 769px) {
body {
font-size: 18px;
}
}在上面的示例中，@media 命令用于定义媒体查询，screen 表示媒体类型为屏幕，max-width 和 min-width 分别表示屏幕的最大和最小宽度。当屏幕宽度小于等于 768px 时，应用第一个媒体查询中定义的样式；当屏幕宽度大于 768px 时，应用第二个媒体查询中定义的样式。
除了 max-width 和 min-width，媒体查询还支持其他的条件，如 max-height 和 min-height、orientation、resolution 等等。通过合理地使用媒体查询，可以实现响应式设计，让网站在不同的设备上都能够呈现最佳的视觉效果。