CSS媒體查詢是一種非常實用的技術，能夠幫助我們在不同的設備上呈現出最佳的用戶體驗。它的應用非常廣泛，其中包括改變圖片的大小、顯示方式和標簽順序等等。

/* 設備寬度小于等于 600px 時，將圖片變小 */
@media screen and (max-width: 600px) {
img {
max-width: 100%;
height: auto;
}
}

這個代碼塊可以非常輕松地將圖片大小在設備寬度小于等于 600px時設置為最大寬度為100%，高度自適應。這對于移動設備是非常實用的，因為我們可以根據設備的屏幕大小來調整圖片的大小，以適應不同的屏幕尺寸。

/* 當設備橫屏時，將圖片放大 */
@media screen and (orientation: landscape) {
img {
max-width: 100%;
height: auto;
}
}

這個代碼塊可以非常輕松地將圖片在設備橫屏時放大，因為在橫屏模式下，設備的寬度通常會比豎屏模式下更大。在這種情況下，我們可以將圖片的大小適當增大，以使其在橫屏模式下更美觀。

/* 不同設備顯示不同圖片 */
@media screen and (min-width: 992px) {
.featured-image {
background-image: url('../images/desktop.jpg');
background-size: cover;
background-position: center center;
height: 600px;
}
}
@media screen and (max-width: 991px) and (min-width: 768px) {
.featured-image {
background-image: url('../images/tablet.jpg');
background-size: cover;
background-position: center center;
height: 400px;
}
}
@media screen and (max-width: 767px) {
.featured-image {
background-image: url('../images/mobile.jpg');
background-size: cover;
background-position: center center;
height: 300px;
}
}

這個代碼塊可以將不同的圖片分別在不同的設備上顯示，通過設置不同的圖片大小和位置，我們可以幫助用戶在不同的設備上欣賞最美麗的圖片。這對于響應式網站開發是非常實用的技術，其中可以輕松地設置不同的圖庫，以適應不同的屏幕尺寸和設備類型。