前端新手村CSS 的單位

  1. 前言
  • CSS 的單位
    1. 絕對單位
    2. 相對單位
      1. 相對於顯示設備
      2. 相對於字母
      3. 相對於瀏覽器的可視區
      4. 其它
    3. 單位轉換
    4. 對於字型單位的建議
    5. 建議在什麼方向，用什麼單位
  • 參考資料

    • 「當你迷惘的時候，就回到原點想一想」-中華一番 蘭飛鴻

    前言

    網頁前端新手村系列文章，宗旨並不在技術本身的教導，重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字，成為比較有系統性的視野。

    讓一開始接觸網頁前端的新手們，有一個比較友善的系統來架構你的學習，至於技術本身的深入探討，就留給其它的高手們吧。

    CSS 的單位


    出處: 參考資料[1]

    絕對單位

    大多是印刷相關的單位。也就是平面設計師熟悉的部份

    • pt (音譯磅因、磅) point 桌面作業系統定義 1 pt = 1 / 72 inch，還有各式各樣的定義[2]
    • pica 派卡 1 pica= 1/6 inch = 12 pt[3]

    在印刷這一種真實輸出的設備，絕對單位是很重要的。但是在螢幕這種數位輸出設備，有時就不一定了。尤其是低解析度的螢幕，也許就有長度上的誤差。(也許啦)

    過去，CSS要求絕對單位的正確程度。錯誤的顯示大於正確的。所以從2011年開始 CSS 對於絕對單位的精準度不再這麼要求。目前，只在高解析螢幕與列印輸出會正確顯示長度

    CSS 沒有定義所謂的「高解析度」，低階打印機在300dpi時開始，高階螢幕在200dpi時。[1:1]

    • DPI參考規格
      • 撞針印表機，解析度通常是60至90 DPI。
      • 噴墨印表機則可達1200 DPI，甚至9600 DPI。
      • 雷射印表機則有600至1200
      • 一般顯示器為96 DPI
      • 一般150線印刷品質需要350 DPI的點陣圖。[4]

    相對單位

    使用絕對單位，可能在不同的設備的螢幕顯示出不同的大小，所以建議使用相對單位。

    有兩個使用相對單位要注意的事

    1. 相對單位的最終，都是取得一個 pixel 值。
    2. 遇上相對單位時，要保持一個習慣: 找出它的基準長度。

    相對於顯示設備

    • px 相對於顯示設備的 pixel size, pixel pitch (假設 pixel 是正方形)
      換句話說，相對於「顯示設備 pixel 的高度/寬度」

    例如: 液晶顯示器的液晶層塗佈決定 pixel 大小，所以是相對單位。

    在顯示器上最銳利的顯示設定方式，這算是在顯示器上精度最高的單位。
    就算列印出來的相對大小也不會相差太多。

    事實上 CSS 要求印表機印出 1px 要在 1/96 inch[1:2]，也就是有規定好的PPI[5]和DPI。

    螢幕內容要列印的單位轉換過程

    Pixel → inch → dot

    px 單位，對於圖片這種「以 pixel 控制」的資料，特別好用。

    相對於字母

    • ex 相對於「當下font-size的字母(小寫)x高」的大小[6]
    • em 相對於「當下font-size的字母(大寫)M寬」的大小[7]
    • rem 相對於「瀏覽器設定字型的 em」，等同於在 body 的 em

    CSS 的 font-size ，是會依照 HTML 結構而繼承給子元素。只要其中一層不是使用 em ，而設定了 px 之類的單位， em 就不一樣了。

    2013年之後，CSS 出現了 rem 的單位。使用 rem 直接吃瀏覽器預設字型為基準尺寸。

    由於 em 和 ex 是基於瀏覽器設定值，以 Chrome 為例單位就是 px 。

    若調整字型，內容容器也要調整寬高，可以考慮使用 em, ex。

    相對於瀏覽器的可視區

    • vh 可視區高
    • vw 可視區寬
    • vmax 可視區長邊
    • vmin 可視區短邊

    定義

    • vh
      1vh = 瀏覽器可視高度的 px / 100，
    • vw
      1vw = 瀏覽器可視寬度的 px / 100，

    由算式的單位，可以知道 vh 和 vw 是用來計算 px 值的。

    用javascript算一下。[8]

    1
    2
    var vw = screen.width/100;
    var vh = screen.height/100;

    使用者只看見滿版的特定畫面，不要看見雜亂的其它東西。vh, vw 是你的好朋友

    其它

    百分比 % ，是很特別的一個單位。
    它的相對基準，是百變的，用在不同的 CSS property，就有不同的，100%。

    舉一些好玩的例子

    property 100%在哪裡
    padding
    包含top, bottom    		 父層容器寬度
    margin
    包含top, bottom    		 父層容器寬度
    width 父層容器寬度
    height 父層容器「高度」

    單位轉換

    相對單位，都可以轉換成 px
    px 可以因為 ppi 轉換成 inch
    inch 已經是絕對單位，可以轉換成任何絕對單位。

    相對單位 → px → (ppi) → inch → 絕對單位 (1inch = 2.54cm = 25.4mm = 72pt = 6pc)

    對於字型單位的建議

    CSS繼承了排版單位 pt, pc ，印刷單位 cm, inch ，你可以依你的喜好使用單位，即使不用絕對單位，只使用 em 和 px。

    使用 px 可以保持美感上一定的精析度與銳利度。但是用在字型使用 em 可讀性會更好。

    1. 不在 <Body> 設定字體大小，使用瀏覽器預設大小，可以保證閱讀上的舒適度。
    2. 而在需要設定 font-size 的內容直接設定 em。

    使用 @media(print) 設定「列印模式」的 CSS，在此，可以使用 pt 這種印刷單位。

    建議在什麼方向，用什麼單位

    字距用 em，行高用 ex !!
    原因在於 em 是 「M」寬， ex 是「x」高(x-height)。
    2ex ~ 3ex 大約是可以參考的行高設定值。

    就像是不會在水平方向使用 vh 單位一樣。

    參考資料

    1. Unit - w3c ↩︎ ↩︎ ↩︎

    2. Point - wiki ↩︎

    3. pica - wiki ↩︎

    4. DPI - wiki ↩︎

    5. PPI - wiki ↩︎

    6. X字高 - wiki ↩︎

    7. Em (字型排印學) - wiki ↩︎

    8. 淺談RWD單位 vh, vw ↩︎

    發表於 
    tags:
  • { CSS }
  • { 2018鐵人賽 }