網站可以在不同的設備上顯示。為了讓網站在不同的屏幕上看起來都很好，我們需要為每種屏幕嵌入不同的CSS（層疊樣式表）。

在編寫CSS時，為了適應不同的屏幕，我們可以使用媒體查詢。媒體查詢是一種CSS技術，可以根據不同屏幕的寬度、高度、方向等條件，設置不同的樣式。

例如，在PC上，我們可能想讓網站的布局更加寬敞。我們可以在CSS中添加以下代碼：

@media screen and (min-width: 1200px) {
body {
max-width: 1200px;
margin: 0 auto;
}
}

這段代碼設置了一個媒體查詢，它只有在屏幕寬度大于等于1200像素時才應用。它將網站的最大寬度設置為1200像素，并將元素的左右邊距設置為自動，這樣整個頁面就會在中央對齊。

類似地，我們可以為手機和平板電腦等設備編寫不同的媒體查詢：

@media screen and (max-width: 768px) { /* 應用于手機 */
/* 移除側邊欄 */
#sidebar {
display: none;
}
/* 將正文寬度設置為100% */
#content {
width: 100%;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) { /* 應用于平板電腦 */
/* 將正文寬度設置為70% */
#content {
width: 70%;
}
}
@media screen and (min-width: 1025px) { /* 應用于PC */
/* 將正文寬度設置為60% */
#content {
width: 60%;
}
}

這段代碼分別為手機、平板電腦和PC編寫了三個媒體查詢。它們在不同的屏幕上應用不同的樣式，比如隱藏側邊欄，在正文寬度之間進行調整等。

使用媒體查詢可以讓網站在不同屏幕上看起來非常好。但是，媒體查詢必須正確地編寫，并且在所有設備和屏幕上都進行測試才能確保它們的可靠性和兼容性。