CSS 可以幫助你優化手機網頁的顯示效果。使用 CSS，你可以調整網頁布局、修改字體樣式，甚至在不同設備上顯示不同的樣式。以下是一些設置手機屏幕的 CSS 技巧。

/* 設置視口寬度 */
@media screen and (max-width: 767px) {
/* 在小屏幕的設備上將視口寬度設置為 100% */
body {
width: 100%;
}
}
/* 設置自適應字號 */
@media screen and (max-width: 1024px) {
/* 在較小的設備上減少字體大小 */
body {
font-size: 14px;
}
}
/* 顯示隱藏元素 */
@media screen and (max-width: 480px) {
/* 將“導航”按鈕顯示出來 */
.nav-button {
display: block;
}
/* 隱藏其他元素 */
.header, main, .footer {
display: none;
}
}

在這些代碼中，我們使用了 @media 規則來定義不同的 CSS 樣式。在每個 @media 規則中，我們可以設置不同的條件，例如最大寬度或最小高度，來定義不同的樣式。這些樣式將根據設備尺寸自適應調整。

在上面的代碼中，第一個 @media 規則將 body 寬度設置為 100%，這可以確保在小屏幕設備上，網頁布局適應設備視口的寬度。

第二個 @media 規則將字體大小減小到 14px，這可以確保在較小的設備上，文字不會太小，難以閱讀。

第三個 @media 規則將某些元素顯示出來，同時隱藏其他元素。這可以確保在非常小的設備上，只顯示最重要的元素，以提供更好的用戶體驗。