在移動設備越來越普及的時代，屏幕自適應成為了前端開發中不可忽視的一環。使用屏幕自適應的 CSS，開發出的頁面不僅能夠在各種分辨率的屏幕上呈現出良好的用戶體驗，也可以提高用戶的滿意度和忠誠度。

/* 屏幕自適應CSS */
/* 通用樣式 */
body {
font-size: 16px;
line-height: 1.5em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 移動設備 */
@media only screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 平板電腦 */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
body {
font-size: 16px;
}
}
/* 臺式電腦 */
@media only screen and (min-width: 1025px) {
body {
font-size: 18px;
}
}

在上面的例子中，我們使用了媒體查詢（@media），也就是 CSS3 新增的功能，通過設定不同的屏幕尺寸，我們可以為不同的設備設置不同的 CSS 樣式，以適配各種不同的移動設備和桌面系統。

為了保證 Web 頁面在移動端的表現，我們需要在 CSS 中設定移動設備的基準字體大小，在上面的例子中，我們將基準字體設置為 16px，而在移動設備中（最大寬度為 768px）將字體大小調整為 14px，這樣可以讓文本在移動設備中更加易讀。

在平板電腦中的設備屏幕可能會更寬，我們可以將字體大小調整為16px，以適配平板電腦上的不同分辨率。

當 Web 頁面在臺式電腦上展示時，我們可以適當調大字體大小，增加頁面展示的舒適度，提高用戶體驗。

總之，通過使用屏幕自適應的 CSS，我們可以讓 Web 頁面在不同的設備中展現更為完美的效果，提高瀏覽體驗和用戶的滿意度。