相對單位(rem 和 em)可以根據基準大小進行縮放,使得文字能夠更靈活地適應不同裝置。
rem:相對於根元素(通常是 html)的字體大小,適合設置全局字體,便於統一管理。設計時,透過改變根元素的字體大小,可以影響整個頁面的文字尺寸。
em:相對於父元素的字體大小,適合用於調整局部元素的字體大小。它的優點是可以讓文字隨著父元素大小的變化而縮放,便於處理內嵌於其他容器內的文字。
這些相對單位使得文字能夠隨著不同裝置的字體基準進行縮放,提升響應式效果。
視口單位(vw 和 vh)是針對視口寬度和高度的相對單位,適合設計大標題或展示字體,使字體大小隨著螢幕尺寸改變。例如:
vw(視口寬度):字體大小根據螢幕的寬度調整,可以確保文字在不同寬度的裝置上保持相對一致的顯示效果。
vh(視口高度):字體大小根據螢幕的高度變化,適合設計需要根據高度進行調整的文字排版。
在大螢幕設備上,視口單位的字體會隨著螢幕變大而增大,適合標題等需要吸引注意的元素;而在小螢幕上字體會縮小,提升閱讀體驗。
行高的設置對於提高可讀性十分重要,特別是在移動裝置上。使用相對單位(如 em 或 rem)設置行高可以確保文字間距隨著字體大小改變而自適應。這樣不論文字在大螢幕或小螢幕上縮放,行距都能保持合適,讓文字不至於過於擁擠或分散。
除了相對單位和視口單位,我們也可以結合媒體查詢針對特定螢幕尺寸進行調整。例如,當螢幕寬度超過一定值時,增加字體大小;而在小螢幕上,適當減小字體和行高,以免佔據過多空間。
透過相對單位和視口單位,我們能夠讓字體大小和排版在不同裝置上保持一致的比例,提供更舒適的閱讀體驗。響應式字體設計不僅提升了文字的可讀性,也讓網頁在各種裝置上呈現出一致的美觀性。