CSS中的@media查詢可以讓我們針對不同的設備大小和屏幕分辨率設置不同的樣式表。這使得CSS變得更加靈活，可以根據不同的情況為網頁提供最佳的用戶體驗。

@media screen and (min-width: 768px) {
/* 在屏幕寬度大于等于768像素時應用以下樣式 */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}

上面的代碼意思是當屏幕寬度大于等于768像素時，將.container元素設置為彈性盒模型布局，并且豎直居中、水平居中。這樣在移動設備上，網頁將排列成一列，而在桌面設備上，網頁將以居中的方式呈現。

@media (max-width: 480px) {
/* 在屏幕寬度小于等于480像素時應用以下樣式 */
.header {
font-size: 2rem;
padding: 1rem;
}
}

上面的代碼意思是當屏幕寬度小于等于480像素時，將.header元素的字體大小增加到2rem，并增加一個1rem的內邊距。這樣可以使得在移動設備上網頁更加易讀易操作。

總的來說，CSS中的@media查詢使得網頁可以更好地適應不同的設備和屏幕大小。這樣可以為用戶提供更加方便的使用體驗。