響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)也是重點：靈活性(6)

　　為了得到一個成比例的高度值，我用和計算水平值一樣的方法：上下文高度是基本字體的字號，因此的高度為：

　　148 ÷ 16 = 9.25

　　我把結(jié)果用em做單位加到CSS中：

　　header{ border="1" Height: 9.25em;/*148px/16px*/ padding:.4375em 4.25531% 0; /*T-7px/16px|RL-40px/940px*/ }

　　靈活的圖片

　　EE Podcast網(wǎng)站沒有太多的內(nèi)置圖片，只有一些背景圖片。目前我還沒決定對這些圖片做什么設(shè)置，因此也沒有什么可以向你展示的技術(shù)流程。

　　我唯一能做的就是向你分享一些我正在參考的網(wǎng)站，它們幫我決定是否有必要在我們的網(wǎng)站上使用靈活的圖片布局。

　　·對于背景圖片來說，我更關(guān)注background-size property是否會派上用場。對內(nèi)置圖片來說，

　　·max-width approach有著不錯的瀏覽器支持，可以用在溢出旁邊。

　　獨立工作流

　　我們已經(jīng)討論了如何使ee-podcast.com的頁面布局變得更加“靈活”。我應(yīng)該說明一下這是個個人項目，因此會在時間允許的情況下來完成它。因此，我實現(xiàn)網(wǎng)站靈活布局的過程是一個迭代的過程。從轉(zhuǎn)換固定寬度開始，慢慢使他能夠響應(yīng)不同的分辨率，整個過程花費了4個月的時間(包括那些和數(shù)學(xué)作斗爭的煩躁不安的時間)。

　　最終我完成了一個獨立的工作流

　　1.我首先直接利用PS設(shè)計稿完成了一個固定寬度的站點

　　2.把所有寬度變?yōu)榘俜直?，除了主容器的寬度，設(shè)置為固定的940像素

　　3.把所有字體單位變成比例字號em

　　4.把所有的margin和padding變成百分比，然后把水平margin和padding變成單位為em的值

　　5.最終我將940像素變成一個百分比

　　為什么用這個流程？主要是因為，作為一個應(yīng)用靈活布局的新手，我希望首先確保自己有一個使用指定像素值的核心的布局(并且在所有瀏覽器上都能很好地顯示)。我的邏輯是，我可以一邊測試，一邊慢慢地使設(shè)計百分比化，但是總能知道基本版式(固定寬度版本