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">

相關網頁


關於 Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 News-Technology。將永久鏈結加入書籤。

CSS 使用 px 和 em 的差異 有 5 則回應

  1. 小M 說道:

    您好 因為"90%的台灣網站需要重寫CSS" 這篇的連結已經失效 只好來這請教您一個問題
    *{
    letter-spacing:0.1em;
    }
    第一段文字

    第二段文字
    以上的語法 在FIREFOX下正常 兩行文字中會有一行空白
    不過在IE下卻無法出現 只因為設置了letter-spacing
    請問這個BUG該怎麼解決呢?
    謝謝

  2. 小M 說道:

    不好意思 不曉得會轉換HTML
    我改一下

    第一段文字

    第二段文字

  3. Tsung 說道:

    看您的問題似乎很像 http://www.goston.net/2007/02/16/741/ 這篇所說的~ 參考看看? 🙂

  4. 米直 說道:

    現在有vm vh等單位,可以隨螢幕大小調整字體,是最完美的單位

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料