靈活XHTML和CSS網頁設計1-字型大小方案

文章目錄

• 先瞭解下各個字型單位：
• 基準尺寸加百分比模型
• 利用基準尺寸+百分比的好處？

 

先瞭解下各個字型單位：

相對單位:px相對於裝置螢幕的解析度；em相對於父元素；ex相對於字母x的高度

絕對單位:in英寸;pt點距;pc picas;cm厘米；mm毫米

絕對單位太絕對了，放棄～

px是主流，但是ie支援不好。。在IE裡利用“查看”=》“字型大小”切換大小沒反應。

ex太冷了點。。

em還行吧。

 

基準尺寸加百分比模型

 

字型大小的控制，除利用數字和單位外，還有關鍵字如small，large等可用。本文要介紹的方案即“基於關鍵字做為基準尺寸，利用百分比調和”來控制字型大小。簡稱“基準尺寸加百分比模型(base-plus-percentage)”。

首先，為body標籤設定基準字型大小。如用關鍵字small

其次，其他元素相對於父級元素，利用百分比控制自身字型大小。

 

如：

body{font-size:small;}

h1 { font-size: 150%; }

h2 { font-size: 130%; }

h3 { font-size: 120%; }

ul li { font-size: 90%; }

 

利用基準尺寸+百分比的好處？

沒有px在IE裡面的毛病…

改了基準尺寸後，別的字型也相應一起改變。

 

今兒在讀《New.Riders.Press.Bulletproof.Web.Design.Jul.2005》，整理整理～讀書不整理和吃完後就拉有區別嗎？？