在頁面整體布局中，頁面元素的尺寸大小（長度、寬度、內外邊距等）和頁面字型的大小也是重要的工作之一。乙個合理設定，則會讓頁面看起來層次分明，重點鮮明，賞心悅目。反之，乙個不友好的頁面尺寸和字型大小設定，則會增加頁面的複雜性，增加使用者對頁面理解的複雜性；甚至在當下訪問終端（iphone、ipad、pc、android…）層出不窮的今天，適應各式各樣的訪問終端，將成為手中的一塊「燙手的山芋」。所以在近幾年，「九宮格」式的「流式布局」再度回歸。為了提供頁面布局，及其它的可維護性、可擴充套件性，我們嘗試將頁面元素的大小，以及字型大小都設定為相對值，不再是孤立的固定畫素點。使其能在父元素的尺寸變化的同時，子元素也能隨之適應變化。以及結合少量最新css3的@media查詢，來實現「響應式布局」，bootstrap這類css框架大勢興起。
然而在css中，w3c文件把尺寸單位劃為為兩類：相對長度單位和絕對長度單位。然而相對長度單位按照不同的參考元素，又可以分為字型相對單位和視窗相對單位。字型相對單位有：em、ex、ch、rem；視窗相對單位則包含：vw、vh、vmin、vmax幾種。絕對定位則是固定尺寸，它們採用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實際應用中，我們使用最廣泛的則是em、rem、px以及百分比（%）來度量頁面元素的尺寸。
px：為畫素單位。它是顯示屏上顯示的每乙個小點，為顯示的最小單位。它是乙個絕對尺寸單位；
em：它是描述相對於應用在當前元素的字型尺寸，所以它也是相對長度單位。一般瀏覽器字型大小預設為16px，則2em == 32px；
%： 百分比，它是乙個更純粹的相對長度單位。它描述的是相對于父元素的百分比值。如50%，則為父元素的一半。
這裡需要注意的是：em是相對於應用於當前當前元素的字型尺寸；而百分比則是相對于父元素的尺寸。如下面示例：
html：
設定長度為5em demo
設定長度為80% demo
div
.parent
.em-demo
.percentage-demo
從圖上我們可以看出：設定5em的div的第一行字元剛好為5個字元大小，因為如上所說，它是相對於當前元素字型的尺寸， 5 * 18 = 90px。而百分比顯示則會比較大一些，因為它是相對于父元素的尺寸比例， 200 * 80% = 160px。
對於px、em和百分比都能設定元素的尺寸和字型大小，但是它們各自有自己所不同的應用場景。不合理的運用，則會導致頁面的混亂、難易維護和擴充套件。對於它們的使用，有如下幾點被大家所認同的最佳實踐：
1. 盡量使用相對尺寸單位
使用相對尺寸單位計量，則在調整頁面的布局的時候，不需要遍歷所有的內部dom結構，重新設定內部子元素的尺寸大小，同時它也能更好的適應與多中解析度和螢幕終端。採用相對定位，並不意味著頁面整體的自適應。
當然，對於希望整體**的「響應式設計」，適應當今層出不窮的的各類訪問終端，相對尺寸布局將發揮更大的價值。我們僅需要利用css3的@media查詢來設定外圍的整體寬度，以及少量在裝置上不一致的使用者體驗。關於「響應式布局」，可以更多的參考bootstrap這類新興的css框架。
對於相對尺寸單位的設定：em和%因為它們相對的參考物不同，所以它們也有不同的使用場景。如果希望隨著當前元素的字型尺寸而改變尺寸，則使用em最佳，如：行高、字型大小。相反，如果是隨著父容器或者是整體頁面布局而改變尺寸，則使用%更好，如元素的高度和寬度設定。
2. 只在可預知的元素上使用絕對尺寸
並不是所有的元素設定相對尺寸就是最佳的。對於如圖表icon、如video這類多**元素、網頁整體的寬度這類可預知尺寸，設定為絕對路徑可能反而是最佳的選擇。但他們需要試具體場景而定，從而獲得最佳體驗。不管我們如此設定相對尺寸，但在外層也總會有一些絕對尺寸度量，才可能存在百分比這類相對尺寸設定。
3. 字型尺寸盡量使用em、rem
rem的相容性，我們可以用can i use**獲取。
4. @media查詢做平台適配，但禁止隨處濫用
如上所說css3的@media查詢，能幫助我們做到多平台終端的自適應布局，得到乙個更好的使用者體驗。但這絕不意味著我們可以隨處濫用它，在css**中存在太多的平台差異的**，這也會增加**可讀性、維護性的難度。更好的方式則是僅在必須使用它的場景下，合理的使用它，如頁面外圍的整體寬度，不同顯示的選單欄等。更多的體驗適應性，可以移動到使用「流式布局」來實現。
關於響應式設計，這是對開發周期、成本和平台體驗的乙個權衡的結果。如果不考慮開發、維護的成本，則為不同平台終端提供不同的頁面設計，這樣得到的使用者體驗會更友好。但在實際開發中，開發和維護成本、產品生命週期也是乙個重要的權衡標準，而響應式設計則是它們之間的權衡結果。
CSS值 單位和字型
最為簡潔明瞭的制定顏色值的方法是利用顏色的名字。html4和css2規定了16種顏色，css2.1新增了乙個orange。要指定顏色很簡單 div style background color gray gray div 下圖是17種顏色的示例 使用命名來指定顏色的話種類很有限，更加通用的方法是用r...
CSS單位（字型）
px px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。emem是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。引自css2.0手冊 任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合 1em...
css字型單位
了解 首先先了解四個字型單位 px em pt rem px 單位名稱為畫素，相對長度單位，畫素 px 是相對於顯示器螢幕解析度而言的，國內推薦 em 單位名稱為相對長度單位。相對於當前物件內文字的字型尺寸，國外使用比較多 pt 全稱為point，但中文不叫 點 確切的說法是乙個專用的印刷單位 磅 ...