在移動設備時代，Web 站點的響應式布局變得更加重要。為了保護在 PC 網(wǎng)頁上呈現(xiàn)的良好外觀，您需要在 CSS 中設置小屏幕樣式。

一種方法是使用媒體查詢。您可以使用以下代碼段來設置小屏幕樣式：

@media only screen and (max-width: 600px) {
/* 添加您的 CSS 樣式 */
}

在此示例中，您可以使用 CSS 在屏幕寬度小于 600 像素時添加樣式。

您還可以使用可伸縮性的單位，例如 vw、vh 或 rem，以便在不同大小的屏幕上保持一致的樣式。例如，您可以使用以下代碼來設置字體大小：

font-size: 2.5vw; /* 這種方式會根據(jù)視口大小自動調(diào)整字體大小 */

此外，您還可以通過設置圖片的最大寬度和高度來確保它們適合小屏幕。您可以使用以下代碼：

img {
max-width: 100%; /* 圖片最大寬度不超過容器 */
height: auto; /* 高度自適應 */
}

最后，您應該考慮使用更簡潔的布局。許多網(wǎng)站使用“漢堡菜單”來在小屏幕上隱藏導航欄。這使得整個布局更加簡單，不會讓細節(jié)混亂。

總之，為了保持響應式網(wǎng)頁設計，您應盡可能使用媒體查詢、可伸縮性單位和更簡潔的布局來設置小屏幕樣式。