星期五, 十二月 07, 2007
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是何物
- em的值並不是固定的
- 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">
其它相關網頁:
您好 有關於letter-spacing的使用
您好 因為"90%的台灣網站需要重寫CSS" 這篇的連結已經失效 只好來這請教您一個問題
*{
letter-spacing:0.1em;
}
第一段文字
第二段文字
以上的語法 在FIREFOX下正常 兩行文字中會有一行空白
不過在IE下卻無法出現 只因為設置了letter-spacing
請問這個BUG該怎麼解決呢?
謝謝
您好 有關於letter-spacing的使用
不好意思 不曉得會轉換HTML
我改一下
<style>
*{
letter-spacing:0.1em;
}
</style>
第一段文字
<br />
<br />
第二段文字
回 小M
看您的問題似乎很像 http://www.goston.net/2007/02/16/741/ 這篇所說的~ 參考看看? :)
發表迴響
PS2: 若您的留言被誤判, 我都會再自行看過, 不需要一直重覆張貼~
