1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. CSS 文字與區塊間距模組!只需透過HTML就可設定,網頁在不同裝置的文字大小與區塊距離

CSS 文字與區塊間距模組!只需透過HTML就可設定,網頁在不同裝置的文字大小與區塊距離

2021/06/16

梅問題-CSS 文字與間距模組,只需透過HTML就可設定,不同裝置的文字大小與區塊間距
  每隔一陣子梅干就會買個網頁版型,看看有沒有什麼新的寫法或是架構,而最近購買了一個版型,讓梅干覺得很奇怪,怎麼有mt、pl….的類別,最後開啟它的CSS樣式檔後,才發現到原來是作者將平時在設計網頁,常會遇到的文字大小、區塊間的距離作成模組化,透過已設定好的樣式,再透過HTML就可定義區塊與文字的樣式,完全不用再開啟CSS作修正。


  而這個概念梅干個人感覺很好,使用起來就像Bootstrap的概念,因此梅干就比照Boostrap的概念,分別將它加入xs與md與預設,讓網頁在不同的裝置下,可設定文字的大小、粗細,以及區塊的的內距與間距,同時梅干也將這個檔案整整理,並放在GitHub中,因此有需要的朋友,就自行下載,至於這隻CSS檔,裡面到底作那些的設定,現在梅干就為大家來解說一下囉!


CSS 文字與間距模組
在下載完畢後,梅干總共設了二組的斷點,分別為小於576px(xs)、768px(md)
文字樣式設定-粗細:
fw200、xs-fw200、md-fw200:font-weight: 200
fw300、xs-fw300、md-fw300:font-weight: 300
fw400、xs-fw400、md-fw400:font-weight: 400
fw500、xs-fw500、md-fw500:font-weight: 500
fw600、xs-fw600、md-fw600:font-weight: 600
fw700、xs-fw700、md-fw700:font-weight: 700

文字樣式設定-字距:
ls1、xs-ls1、md-ls1:letter-spacing: 1px
ls2、xs-ls2、md-ls2:letter-spacing: 2px
ls3、xs-ls3、md-ls3:letter-spacing: 3px
ls4、xs-ls4、md-ls4:letter-spacing: 4px
ls5、xs-ls5、md-ls5:letter-spacing: 5px

文字樣式設定-字級:
fz-13、xs-fz-13、md-fz-13:font-size: 13px
fz-15、xs-fz-15、md-fz-15:font-size: 15px
fz-16、xs-fz-16、md-fz-16:font-size: 16px
fz-18、xs-fz-18、md-fz-18:font-size: 18px
fz-20、xs-fz-20、md-fz-20:font-size: 20px
fz-30、xs-fz-30、md-fz-30:font-size: 30px
fz-36、xs-fz-36、md-fz-36:font-size: 36px
fz-48、xs-fz-48、md-fz-48:font-size: 48px

區塊-間距 Margin:
區塊間的間距中,從5px開啟一直到200px,每一個級距為5px。
margin-top:mt
margin-bottom:mb
margin-left:ml
margin-right:mr
ex:上方5像素
mt-5、xs-mt-5、md-mt-5

區塊-內距 Padding:
區塊內的間距中,從5px開啟一直到200px,每一個級距為5px。
padding-top:pt
padding-bottom:pb
padding-left:pl
padding-right:pr
ex:上方5像素
pt-5、xs-pt-5、md-pt-5

透過這樣子的設定,就不用再開啟CSS來作修改,直接從HTML改變class名稱,立即就可實現區塊間的距離,或是文字的大小與粗細,而各位使用上有任何問題,也歡迎提出討論囉!