CSS 使用 px 和 em 的差異

CSS 在設計頁面的時後, 並不是說 px 就一定不要用, 只是要注意說, 畫面放大的時後, px 指定的是不會跟著一起放大, 所以我的做法是如下:

• 文字: 使用 em 或 %.
• 間距: 兩個 Module 的間距這種, 用 px (不然畫面放大, 間距也跟著放大, 也蠻難看的.

主要是看到這篇 90%的台灣網站需要重寫CSS, 這篇文章把 px 和 em 解釋的蠻清楚的, 下面摘錄他的 標題 和 幾個重點.(不過, 我覺得他把標題改成 px/em 的差異, 或許更好一點.. XD)

• 不用「px 」or 「pt」致使Internet Explorer對文字失去可調性
  • 用「px」定義字體的弊端
  • em vs. px
  • em是何物
    1. em的值並不是固定的
    2. em會繼承父級元素的字體大小
• 適當的調整字距與行距，讓文字與文字之間有個喘息的空間
  • 書本 vs. 網頁
  • 字距與行距的調整
  • 該怎麼定義(CSS 定義字距: 字距: letter-spacing / 行距: lline-height)
  • 完整的演示例子

基本上, Yahoo! 的 YUI Fonts CSS 是建議, 字的大小都用 % 來表示, 所以他也有提供對照表:

• 10px => 77%
• 11px => 85%
• 12px => 93% (was 93)
• 13px => 100%
• 14px => 108% (was 107)
• 15px => 116% (was 114)
• 16px => 123.1% (was 122)
• 17px => 131% (was 129)
• 18px => 138.5% (was 136)
• 19px => 146.5% (was 144)
• 20px => 153.9% (was 152)
• 21px => 161.6% (was 159)
• 22px => 167%
• 23px => 174%
• 24px => 182%
• 25px => 189%
• 26px => 197%

照 YUI 的說法是, 平常在寫 自訂區塊、頁寬等, 先用 px 數確定好, 再照下面的公式去算 em 值:

• px / 13 = em (non IE)
• px / 13 * 0.9759 = IE

其它要再注意的是:

• 最好要設 min-width
• 其它都用 % 算

在寫 CSS 時, 都建議掛進 css reset, 然後再來寫自己要的 Style(就是確定一切從 0 開始就是了).

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.0/build/reset-fonts-grids/reset-fonts-grids.css">

相關網頁

• YUI: CSS Grid Builder
• EmChart - em vs px 轉換圖表