在CSS中,使用em
單位來定義文本的大小,它是相對單位。
p{ font-size: 1em; }
當在選擇器中使用了em
單位,它會以父元素字體大小作為基準值。
div{ font-size: 16px; } p{ font-size: 1.2em; /*相當于19.2px*/ }
這里,p
元素的字體大小將會是父元素div
字體大小16px的1.2倍,即19.2px。
em
的優勢在于它可以很好地適應父元素字體大小的變化。
div{ font-size: 16px; } p{ font-size: 1.2em; /*相當于19.2px*/ } @media screen and (max-width: 768px){ div{ font-size: 14px; } }
在上面的代碼中,當屏幕寬度小于768px時,div
元素的字體大小將會改變為14px,而p
元素的字體大小也會跟著變化。
總體來說,em
單位的使用可以讓網頁更加靈活,有機會可以試著使用一下。