##靈活運用單位的選擇，讓字體大小為網頁設計畫龍點睛！
##為什麼要有這功能
文字大小在網頁設計中對用戶體驗至關重要。合適的文字大小不僅可以提升網站的可讀性，還可以讓整體設計更加一致且美觀。使用CSS設置文字大小可以靈活應對不同的屏幕分辨率和設備，確保網站內容在各種顯示器上都能清晰易讀。
##核心結構
CSS提供了多種方式來設置文字大小，主要分為四類：長度單位、百分比、絕對大小和相對大小。
長度單位：最常見的單位是px（像素），可精確地控制文字大小。
百分比：文字大小相對於父元素的大小來計算，適合在響應式設計中使用。
絕對大小：使用CSS的關鍵字（如small, medium, large等）來設定固定的字體大小。
相對大小：使用em或rem，相對於父元素或根元素的字體大小進行計算。
##主要功能
精確控制：使用px可以精確地設置文字的大小。
響應式設計：使用百分比或相對大小可以讓文字在不同裝置間保持一致的相對比例。
方便調整：em和rem單位讓文字大小能夠根據容器大小動態調整，非常適合現代響應式設計。
##注意事項
可讀性：文字過大或過小都會影響用戶體驗，應根據不同設備設置合適的大小。
瀏覽器兼容性：大多數現代瀏覽器支持這些單位，但還是要確保在所有設備上效果一致。
##簡單範例應用
<style>
body {
font-size: 16px; /* 設定基礎字體大小 */
}
h1 {
font-size: 2rem; /* h1標題的字體大小為2倍根元素字體大小 */
//根元素的字體大小預設為16px，因此2rem就是32px
}
p {
font-size: 100%; /* 段落文字大小相對於父元素設置 */
}
.small-text {
font-size: small; /* 使用絕對大小設置小字體 */
}
</style>
<body>
<h1>這是標題</h1> <!-- 使用2rem相對字體大小設置，適應不同設備 -->
<p>這是正文內容，文字大小為父元素的100%。</p> <!-- 使用百分比設置，方便響應式設計 -->
<p class="small-text">這是小字體的內容。</p> <!-- 使用絕對大小設置的小字體 -->
</body>
iThome鐵人賽
看影片追技術