CSS中,有很多的屬性可以調(diào)整文本字體的大小,例如font-size、line-height等等。但是如果要讓文字的大小隨著頁面的變大而變大,該如何實現(xiàn)呢?
body { font-size: 16px; } h1 { font-size: 1.5rem; } @media screen and (min-width: 768px) { body { font-size: 20px; } h1 { font-size: 2rem; } }
可以通過@media查詢來設(shè)置不同窗口寬度下的字體大小。在上面的例子中,當頁面寬度大于等于768px時,網(wǎng)頁中所有元素的字體大小都會變?yōu)樵瓉淼?.25倍。
注意,以上代碼是把整個頁面的字體大小同時變化的方法。如果只想讓某個特定元素的字體大小隨著頁面變化而變化,可以使用vw或者em來設(shè)置字體大小。
h1 { font-size: 5vw; } @media screen and (min-width: 768px) { h1 { font-size: 3em; } }
在這個例子中,h1元素的字體大小會以視口寬度的5%為基礎(chǔ),隨著頁面的變大而變大。而當頁面的寬度大于等于768px時,h1元素的字體大小會變成3em。
總之,無論是使用@media還是vw/em,調(diào)整字體大小大小隨著頁面變化而變化都有很多的方法,可以根據(jù)具體場景進行選擇。