CSS是一種用于樣式化網頁的語言，被廣泛應用于網頁設計中。CSS擁有豐富的樣式屬性，為網頁設計師帶來了更多的創意空間。在不同的屏幕上，CSS可以幫助我們更好地呈現網頁的內容，提供更好的用戶體驗。

/* 示例代碼 */
body {
background-color: #f2f2f2; /* 設置背景色 */
font-family: Arial, sans-serif; /* 設置字體 */
}
h1 {
font-size: 36px; /* 設置標題字體大小 */
}
p {
font-size: 18px; /* 設置正文字體大小 */
color: #333333; /* 設置正文顏色 */
}

在不同的屏幕上，我們需要考慮網頁的響應式設計。響應式設計指的是根據用戶設備的不同，自動調整網頁的布局和樣式。最常見的三種屏幕是桌面、平板和手機。

在桌面上，用戶通常有更大的屏幕空間來瀏覽網頁。我們可以利用CSS的媒體查詢功能，根據屏幕尺寸來設置不同的樣式。例如，在大屏幕上，我們可以增加網頁的寬度和字體大小來提高可讀性。

/* 媒體查詢示例 */
@media screen and (min-width: 1024px) {
body {
max-width: 1200px; /* 設置最大寬度 */
font-size: 20px; /* 提高字體大小 */
}
}

在平板上，用戶的屏幕空間相對較小，但比手機要大。我們可以通過合適的布局和字體大小來提高用戶體驗。通常，我們會把一些細節隱藏起來，以避免屏幕過于擁擠。

/* 平板樣式示例 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* 隱藏次要信息 */
.secondary {
display: none;
}
/* 調整布局 */
.main {
width: 80%;
margin: 0 auto;
}
/* 調整字體大小 */
p {
font-size: 16px;
}
}

在手機上，用戶屏幕空間最小，需要更多地關注布局和字體大小。我們通常會使用更小的字體和壓縮布局，使網頁適應手機屏幕。此外，我們還可以使用CSS的Flexbox和Grid布局來簡化網頁的結構和格式。

/* 手機樣式示例 */
@media screen and (max-width: 767px) {
/* 壓縮布局 */
.main {
width: 100%;
padding: 10px;
}
/* 簡化結構 */
.card {
display: flex;
flex-direction: column;
}
/* 調整字體大小 */
p {
font-size: 14px;
}
}

總之，CSS可以幫助我們在不同的屏幕上創建出更好的用戶體驗。通過合適的布局、字體大小和顏色，我們可以使網頁更具可讀性和可用性。同時，利用媒體查詢，我們可以為不同的屏幕設置不同的樣式，使網頁具備更好的響應式。