
但在RWD的網頁中,除了圖片以外,再來就是文字,由於文字字級的大小,當不作特別設定時,字級是固定的,有時在桌面機版看剛剛好,但到了行動版就變得有點太大,因此Bootstrapx在5.0版,則針對文字字級,加入了自適應的機制,讓文字字級也可隨著裝置不同,自動的調整字級大小,至於要怎麼來作設定,現在就一塊來看看囉!
Step1
雖然Bootstrap5還未推出正式版,但就在目前的版本中,可找到Font size的介紹,分別針對.h1~.h6標題作設定,以及.fs-1~.fs-6的六種不同字級大小來作設定。

Step2
首先這邊梅干分別用二個P,一個是完全不作任何的設定,一個則是使用Boostrap5的所提供的字級尺寸來作設定,在桌機版可看到,當沒作任何設定的P字級為16px,有設定的字級為40px。

Step3
到了平板時,沒設定的P還是16px,而有作設定的則自動縮小變成33.52px。

Step4
再到行動版時,沒設定的P依然是16px,但有設定則變成27.625px,因此有了Bootstrap5所提供的文字自適應的機制,讓文字不再乎大乎小啦!

#範例預覽