在前端開發中，要想讓網頁實現在不同屏幕大小下適應不同布局，CSS的媒體查詢就是必須要了解的重要知識點之一。

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

以上代碼為一個媒體查詢的基本樣例，其中screen表示媒體類型，max-width: 600px表示當屏幕寬度小于等于600像素時應用該媒體查詢的樣式，這里將body的字體大小設為14像素。

通常我們會在樣式表中定義多個媒體查詢，以應對不同的屏幕尺寸和設備類型。比如我們可能會針對手機、平板、PC等不同類型的設備來定義不同的媒體查詢，以保證網頁在各種設備上都能夠良好展示。

@media screen and (max-width: 767px) {
/* 手機 */
}
@media screen and (min-width: 768px) and (max-width: 991px) {
/* 平板 */
}
@media screen and (min-width: 992px) {
/* PC */
}

上面是一個常見的根據設備類型來定義媒體查詢的示例，其中設備類型的劃分值并不是一定的，大家可以根據自己的需要來設置。此外，通過CSS的媒體查詢，我們還可以應用一些新的CSS特性，比如flex布局，來實現更加靈活的布局方案。