CSS多媒體查詢是一種非常靈活的技術(shù)，可以使我們更好地控制網(wǎng)頁的樣式。現(xiàn)在越來越多的人使用不同尺寸的設(shè)備來訪問網(wǎng)頁，而使用多媒體查詢可以根據(jù)屏幕大小來調(diào)整元素的大小、位置等屬性。

其中一個常用的查詢就是根據(jù)屏幕高度來調(diào)整樣式。我們可以使用min-height和max-height屬性來定義不同高度下的樣式。

@media screen and (min-height: 500px) {
/* 當屏幕高度大于等于500px時的樣式 */
body {
background-color: #f5f5f5;
}
}
@media screen and (max-height: 500px) {
/* 當屏幕高度小于等于500px時的樣式 */
body {
background-color: #fff;
}
}

在上面的代碼中，我們使用@media查詢來對不同高度下的body元素的背景色進行了定義。當屏幕高度大于等于500px時，背景色為#f5f5f5；當屏幕高度小于等于500px時，背景色為#fff。

同樣的，我們也可以根據(jù)屏幕寬度來調(diào)整樣式：

@media screen and (min-width: 768px) {
/* 當屏幕寬度大于等于768px時的樣式 */
#nav {
display: block;
}
}
@media screen and (max-width: 768px) {
/* 當屏幕寬度小于等于768px時的樣式 */
#nav {
display: none;
}
}

上面的代碼將導(dǎo)航欄#nav的顯示與屏幕寬度掛鉤，當屏幕寬度大于等于768px時，導(dǎo)航欄以塊級元素的形式顯示；當屏幕寬度小于等于768px時，導(dǎo)航欄被隱藏。

通過CSS多媒體查詢，我們可以輕松地實現(xiàn)響應(yīng)式布局，適應(yīng)不同尺寸的設(shè)備。