CSS是網頁設計中不可或缺的一部分,通過CSS我們能讓網頁更加美觀、舒適。在接觸CSS時,文字自適應屏幕是一個重要的考慮因素。
p { font-size: 16px; /*設置字體大小*/ line-height: 1.5; /*設置行高*/ } @media screen and (max-width: 768px) { p { font-size: 14px; /*在小屏幕下設置較小的字體大小*/ } }
在上面的代碼中,我們給p標簽設置了字體大小為16px,行高為1.5。同時,我們使用CSS媒體查詢@media,在小于等于768px的屏幕下,我們將字體大小調整為14px,以適應小屏幕。
除了以上的代碼,我們還可以使用CSS3的rem單位,這使得我們創建更加靈活的自適應文字大小方案。rem單位是相對于根元素(html)的字體大小,這意味著我們只需要在根元素中設置字體大小,就能讓整個頁面中的文字大小自適應屏幕。
html { font-size: 16px; } p { font-size: 1rem; /*使用rem單位*/ line-height: 1.5; } @media screen and (max-width: 768px) { html { font-size: 14px; /*在小屏幕下設置較小的根字體大小*/ } }
在上面的代碼中,我們給html元素設置了字體大小為16px,而p標簽中的字體大小則使用了1rem單位。當我們在小于等于768px的屏幕下,我們將html元素的字體大小調整為14px,這樣所有使用rem單位的元素都會根據根元素的字體大小自適應屏幕。