iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
4
Modern Web

前端新手村系列 第 4

前端新手村 CSS 的單位

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

前言

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

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

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]

  • 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],也就是有規定好的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 直接吃瀏覽器預設字型為基準尺寸。

由於 emex 是基於瀏覽器設定值,以 Chrome 為例單位就是 px

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

相對於瀏覽器的可視區

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

定義

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

由算式的單位,可以知道 vhvw 是用來計算 px 值的。

用javascript算一下。[8]

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 ,你可以依你的喜好使用單位,即使不用絕對單位,只使用 empx

使用 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


上一篇
前端新手村 HTML的作用
下一篇
前端新手村 CSS 的作用
系列文
前端新手村30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-22 10:35:41

好想工作是鉛筆XD

我要留言

立即登入留言