隨著移動設備的普及,越來越多的網站需要使用響應式設計來保證在不同屏幕大小上都能有良好的表現。其中,字體也是一個非常關鍵的因素,因為不同大小的屏幕需要不同大小的字體來確保用戶能夠輕松閱讀內容。
在CSS中,我們可以使用字體大小和媒體查詢來創建響應式字體。下面是一個例子:
/* 默認字體大小 */ body { font-size: 16px; } /* 改變字體大小,以適應較小的屏幕 */ @media only screen and (max-width: 480px) { body { font-size: 14px; } } /* 改變字體大小,以適應更小的屏幕 */ @media only screen and (max-width: 320px) { body { font-size: 12px; } }
在這個例子中,我們首先設置了一個默認的字體大小,它適用于所有的屏幕尺寸。接下來,我們使用@media查詢來針對兩個不同的屏幕尺寸(480px和320px)設置不同的字體大小。當瀏覽器的寬度小于等于480px時,字體大小會變成14px;當瀏覽器的寬度小于等于320px時,字體大小會變成12px。
需要注意的是,這里使用的是相對大小(以像素為基準),而不是絕對大?。ㄈ鏿t或em)。這種方式將字體大小與屏幕大小關聯起來,因此當用戶調整屏幕大小時,字體大小也會隨之改變。