![梅問題-Bootstrap5 新增自適應文字字級,隨著裝置尺寸不同自動調整文字大小](http://photo.minwt.com/img/Content/webdesign/bootstrap5-font-size-rwd/bootstrap5-font-size-rwd_00.jpg)
但在RWD的網頁中,除了圖片以外,再來就是文字,由於文字字級的大小,當不作特別設定時,字級是固定的,有時在桌面機版看剛剛好,但到了行動版就變得有點太大,因此Bootstrapx在5.0版,則針對文字字級,加入了自適應的機制,讓文字字級也可隨著裝置不同,自動的調整字級大小,至於要怎麼來作設定,現在就一塊來看看囉!
Step1
雖然Bootstrap5還未推出正式版,但就在目前的版本中,可找到Font size的介紹,分別針對.h1~.h6標題作設定,以及.fs-1~.fs-6的六種不同字級大小來作設定。
![梅問題-Bootstrap5 新增自適應文字字級,隨著裝置尺寸不同自動調整文字大小](http://photo.minwt.com/img/Content/webdesign/bootstrap5-font-size-rwd/bootstrap5-font-size-rwd_01.jpg)
Step2
首先這邊梅干分別用二個P,一個是完全不作任何的設定,一個則是使用Boostrap5的所提供的字級尺寸來作設定,在桌機版可看到,當沒作任何設定的P字級為16px,有設定的字級為40px。
![梅問題-Bootstrap5 新增自適應文字字級,隨著裝置尺寸不同自動調整文字大小](http://photo.minwt.com/img/Content/webdesign/bootstrap5-font-size-rwd/bootstrap5-font-size-rwd_02.jpg)
Step3
到了平板時,沒設定的P還是16px,而有作設定的則自動縮小變成33.52px。
![梅問題-Bootstrap5 新增自適應文字字級,隨著裝置尺寸不同自動調整文字大小](http://photo.minwt.com/img/Content/webdesign/bootstrap5-font-size-rwd/bootstrap5-font-size-rwd_03.jpg)
Step4
再到行動版時,沒設定的P依然是16px,但有設定則變成27.625px,因此有了Bootstrap5所提供的文字自適應的機制,讓文字不再乎大乎小啦!
![梅問題-Bootstrap5 新增自適應文字字級,隨著裝置尺寸不同自動調整文字大小](http://photo.minwt.com/img/Content/webdesign/bootstrap5-font-size-rwd/bootstrap5-font-size-rwd_04.jpg)
#範例預覽