1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [教學] Bootstrap5 新增自適應文字字級,讓文字大小會隨著裝置尺寸自動調整

[教學] Bootstrap5 新增自適應文字字級,讓文字大小會隨著裝置尺寸自動調整

2021/05/20

梅問題-Bootstrap5 新增自適應文字字級,隨著裝置尺寸不同自動調整文字大小
  Bootstrap讓在製作RWD自適應網頁,變得更加簡單,且只需透過它已定義好的CSS樣式,幾乎在版面編排時,不用寫到太多的CSS樣式設定,就能讓版面在各個裝置中正常顯示,即便是圖片、iframe、表格….等,都能輕鬆完成。

但在RWD的網頁中,除了圖片以外,再來就是文字,由於文字字級的大小,當不作特別設定時,字級是固定的,有時在桌面機版看剛剛好,但到了行動版就變得有點太大,因此Bootstrapx在5.0版,則針對文字字級,加入了自適應的機制,讓文字字級也可隨著裝置不同,自動的調整字級大小,至於要怎麼來作設定,現在就一塊來看看囉!


Step1
雖然Bootstrap5還未推出正式版,但就在目前的版本中,可找到Font size的介紹,分別針對.h1~.h6標題作設定,以及.fs-1~.fs-6的六種不同字級大小來作設定。
梅問題-Bootstrap5 新增自適應文字字級,隨著裝置尺寸不同自動調整文字大小
Step2
首先這邊梅干分別用二個P,一個是完全不作任何的設定,一個則是使用Boostrap5的所提供的字級尺寸來作設定,在桌機版可看到,當沒作任何設定的P字級為16px,有設定的字級為40px。
梅問題-Bootstrap5 新增自適應文字字級,隨著裝置尺寸不同自動調整文字大小
Step3
到了平板時,沒設定的P還是16px,而有作設定的則自動縮小變成33.52px。
梅問題-Bootstrap5 新增自適應文字字級,隨著裝置尺寸不同自動調整文字大小
Step4
再到行動版時,沒設定的P依然是16px,但有設定則變成27.625px,因此有了Bootstrap5所提供的文字自適應的機制,讓文字不再乎大乎小啦!
梅問題-Bootstrap5 新增自適應文字字級,隨著裝置尺寸不同自動調整文字大小
#範例預覽