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

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

　　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)站沒(méi)有太多的內(nèi)置圖片，只有一些背景圖片。目前我還沒(méi)決定對(duì)這些圖片做什么設(shè)置，因此也沒(méi)有什么可以向你展示的技術(shù)流程。

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

　　·對(duì)于背景圖片來(lái)說(shuō)，我更關(guān)注background-size property是否會(huì)派上用場(chǎng)。對(duì)內(nèi)置圖片來(lái)說(shuō)，

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

　　獨(dú)立工作流

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

　　最終我完成了一個(gè)獨(dú)立的工作流

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

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

　　3.把所有字體單位變成比例字號(hào)em

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

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

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