相對於螢幕解析度的字體大小 網站設計的流暢性至關重要,但確保不同解析度下正確的字體大小可能是一個挑戰。問題是瀏覽器的字體大小可以覆蓋“em”等單位,從而使選單文字在指定框外換行。 解決方案:視口相對單位 現代CSS 引入佔設備螢幕解析度的視口相對單位: vw(視口寬度百分比): 表示視口寬度的百分比。 vh (視口高度百分比): 視口高度的百分比。 vmin (視口最小值): vw 或 vh 中較小的一個。 vmax (視口最大值): vw 或 vh 中較大的一個。 例如: 這將字體大小設定為視口寬度的 3.2%,確保它可以針對不同的螢幕解析度正確縮放。 替代方法 媒體查詢:可以使用媒體查詢定義斷點,讓字體要根據特定螢幕寬度範圍調整大小。 百分比 (%) 和根 Ems (rem):透過設定基本字體大小並使用這些單位,文字可以跨裝置縮放,並且方便存取。