iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 9

網頁常用單位-30天學會HTML+CSS,製作精美網站

設置CSS樣式大小時,會使用到各種不同的單位,尤其現在都製作響應式網站,用錯單位,就會針對不同尺寸調整大小相當耗時,以下介紹網頁常用各種網頁單位,讓你使用的更加得心應手。

絕對單位

px(像素)

網頁最常使用的單位,你設定多少就是多少,不會受到其他元素影響。
假設你設定10px無論你在電腦版或手機版看都會顯示10px。缺點就是缺乏彈性,在響應式網頁,隨著螢幕寬度變化,就要做個別的調整,因此建議用在不用隨裝置調整的地方。

下面範例你設定字體大小多大就顯示多大,不會受其他因素影響。

<div style="font-size:20px;">font-size:20px
  <div style="font-size:18px;">font-size:18px
    <div style="font-size:16px;">font-size:16px
      <div style="font-size:15px;">font-size:15px
      </div>
    </div>
  </div>
</div>

https://ithelp.ithome.com.tw/upload/images/20210924/20112053wCrzsPb0al.png

相對單位

相對單位受父元素的影響,大小會隨著當作基準的數值改變。

em

父元素的大小為基準單位。
假設預設文字大小為15px,子元素會乘上父元素的值,導致越內層的文字越來越大。到最後網站就崩壞了QQ

<div style="font-size:15px;">font-size:15px
  <div style="font-size:1.1em;">font-size:1.1em*15
    <div style="font-size:1.1em;">font-size:1.1em*1.1em*15
      <div style="font-size:1.1em%;">font-size:1.1em*1.1em*1.1em*15
      </div>
    </div>
  </div>
</div>

https://ithelp.ithome.com.tw/upload/images/20210924/20112053dL0FmhE75C.png

rem

rem是「root」+「em」,以根元素當作基礎的單位。
假設預設文字大小為15px,子元素會乘上根元素的值,只會受根元素大小影響

<div style="font-size:15px;">font-size:15px
  <div style="font-size:1.1rem;">font-size:1.1rem*15
    <div style="font-size:1.1rem;">font-size:1.1rem*15
      <div style="font-size:1.4rem;">font-size:1.4rem*15
      </div>
    </div>
  </div>
</div>

https://ithelp.ithome.com.tw/upload/images/20210924/20112053G2t79E9ybb.png

%(百分比)

父元素當作基準。
下面範例預設大小是15px,因為%是繼承父元素,所以就會越來越大,與em顯示方式相似。

<div style="font-size:15px;">font-size:15px
  <div style="font-size:110%;">font-size:110%*15
    <div style="font-size:110%;">font-size:110%*110%*15
      <div style="font-size:110%;">font-size:110%*110%*110%*15
      </div>
    </div>
  </div>
</div>

https://ithelp.ithome.com.tw/upload/images/20210924/20112053FXpvAQog15.png

視窗單位

以下vw、vh、vmin、vmax四個單位是視窗單位也是相對單位。因為他們是針對視窗大小來決定。1單位類似1%。

vw / vh

vw是「viewport width」的縮寫;vh是「viewpoint height」的縮寫。以視窗(Viewport)瀏覽器實際顯示的寬度和高度為基準的比例單位。
假設瀏覽器寬度為1400px,設定50vw的寬度就是1400的50%,也就是700px,會隨著螢幕寬度而變動,因此很適合用在響應式網頁。

vmin / vmax

當前視窗的vw及vh的最小值或最大值。
假設瀏覽器寬度為1040px,高度為750px,1vmin=750/100px=7.5px,1vmax=1040/100px=10.4px。
寬度為600px,高度為1000px,1vmin=600/100=6px,1vmax=1000/100=10px

資料來源:
https://www.oxxostudio.tw/articles/201809/css-font-size.html


上一篇
偽類與偽元素-30天學會HTML+CSS,製作精美網站
下一篇
網頁命名規則-30天學會HTML+CSS,製作精美網站
系列文
30天學會HTML+CSS,製作精美網站30

尚未有邦友留言

立即登入留言