iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0
Modern Web

CSS大全閱讀筆記系列 第 14

第四章:數值與單位(3)

  • 分享至 

  • xImage
  •  

(接上篇的距離部分)


  1. 距離:
    c. 解析度單位:
    - 因為媒體查詢(media query)和響應式設計的出現,為了能夠描述螢幕解析度,孕育而生的單位類型。
    - 每英吋點數(dpi):每英吋顯示的顯示點個數,其中顯示點可以是印表機的點、螢幕設備實際的像素等顯示單元。
    - 每公分點數(dpcm):類似於dpi,但以每公分顯示的顯示點個數計算。
    - 每像素單位點數(ddpx):在CSS3中,1dppx=96dpi,但未來CSS版本可能會改變比例。
    d. 相對長度單位:
    - 相對長度是相對於其他基準而來的,因此實際距離會因為自身無法控制的外因而改變(如螢幕解析度、埠寬度、使用者偏好設定等),而以其他元素為基準值的相對長度單位,就算是同等長度也會因對應元素而變化。
    - em與ex:em單位在定義字型大小時,會以親代元素為基準值,但在定義其他部分時,則是以該元素的字型大小為基準,因此當<p>的字體大小為14px,設定padding: 1em;時,padding寬度為14px,而<h1>...<span>...</span>...</h1>中,設定h1{font-size: 20px;} span{font-size: 0.5em};<span>的字體大小為10px,em的單位是<number>或百分比。em和ex是關係密切,其中em是以所用字型裡的m為1em的寬度,ex是以所用字型裡中的x作為1ex的基準高度,因此相同em不同字型的文字,ex會不同
    - rem:em和rem很相似,都是以元素宣告字型的大小為基礎,單位是<number>或百分比。但不同於em以元素本身的字型大小為基準(em中的font-size以親代元素為基準),rem則統一以根元素(<html>)的字型大小作為度量的基準,因此當沒有特別設定時,1rem會等於使用者所預設的字體大小的100%,如果使用者預設字體大小為16px,1rem就會等於16px。
    - ch:CSS3加入,以使用字型中0的步進寬度為計量單位,步進寬度是指字元開始到下個字元開始之間的距離,通常包含字元本身與兩側的間距(間距可為負值),另外,除了等寬字型,每個字型不一定會與0相等。
    - 視埠相關單位:這類單位是以視埠(瀏覽器視窗、可列印區域、行動裝置顯示範圍)的大小為基準計算而來,在填滿視埠的設計和行動裝置最為實用,不用再額外調整大小,當視埠大小被調整時(如瀏覽器視窗被縮放),就會隨之調整大小。視埠為基準的單位,有視埠寬度單位(vw)、視埠高度單位(vh)、視埠最小單位(vmin)、視埠最大單位(vmax)四種,vw以視埠寬度除以100而得,vh以視埠高度除以100而得,vmin是以視埠的寬和高各除以100後取最小值,vmax則是以視埠的寬和高各除以100後取其中的最大值。這些單位可以被用在任何允許長度單位的地方,如font-sizemargin等,且不會受到座標軸的限制,所以vw可以用在高度,vh用在寬度也沒有任何問題。在支援度上,注意vmax和vmin的支援度,vh和vw支援度更高一些。

上一篇
第四章:數值與單位(2)
下一篇
第四章:數值與單位(4)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言