CSS媒介查詢的作用是根據設備的不同條件應用不同的CSS樣式，而其中寬度和高度的設定對于頁面的適配至關重要。

/* 假設我們想要在頁面寬度小于等于320px時改變文字顏色 */
@media(max-width: 320px) {
p {
color: red;
}
}
/* 又或者我們想要在頁面高度小于等于480px時改變圖片大小 */
@media(max-height: 480px) {
img {
width: 50%;
height: 50%;
}
}

如上面的代碼所示，我們在使用媒介查詢時可以根據不同條件改變樣式。在第一個樣式代碼塊中，我們使用了max-width，當頁面寬度小于等于320px時就會使p標簽文字顏色變成紅色；在第二個樣式代碼塊中，我們使用了max-height，當頁面高度小于等于480px時就會改變圖片大小為原來的一半。

需要注意的是，我們不僅可以使用max-width和max-height，還可以使用min-width和min-height，它們的作用與其名稱相似，只是設置值的方向相反。

最后，需要特別提醒的是，在使用媒介查詢時需要注意設備的不同屏幕像素密度，如果在普通設備上設置的像素寬高在高分辨率設備上就會顯得非常小，建議使用em、rem、vw、vh等相對單位。