99久久精品免费观看国产_久久无码人妻一区二区三区_50岁熟妇的呻吟声对白_毛很浓密超多黑毛的少妇

當瀏覽流式布局的網站時，內容區可能變得太寬而降低了可讀性。為了提高可讀性，設計師嘗試通過CSS 的屬性來限制布局的最大寬度。彈性布局（或者稱為可縮放）布局采用了完全不同的方法來實現相同的效果。這種布局的基本思想是根據用戶的字體大小而不是瀏覽器視口大小來調整網頁布局的寬度。像素是計算機屏幕上無法縮放的一個點，em 則是字體的一個方形單位。根據用戶對于字體尺寸的選擇，em 單位經常發生變化（Elastic Design, alistapart.com）。相應的，設計師使用em 單位，一種與弗雷元素尺寸相關的相對單位來表示字體的大小。通過為布局中的區塊和字體使用em 單位，設計師能夠實現網頁布局的整體縮放，保持內容區每行的寬度適中，實現接近現實的縮放效果。最后，當用戶增加字體尺寸時，布局自動縮放，就像它們是一個有彈性的物體一樣。

由于(yu)不(bu)依賴于(yu)瀏覽器(qi)視口的變化，彈性布局(ju)有(you)點類似于(yu)固定寬(kuan)度布局(ju)，同(tong)時(shi)具備了它的優(you)點和缺點。設(she)置很(hen)大的字體(ti)尺寸(cun)會(hui)(hui)擴展布局(ju)的寬(kuan)度和高(gao)度，最后(hou)布局(ju)變得無(wu)法使用和閱讀。但(dan)是，這種情況(kuang)極少發生，因為很(hen)少有(you)人會(hui)(hui)把字體(ti)放大3 倍（特別是設(she)計師(shi)已經使用了一個足(zu)夠(gou)大的字體(ti)作(zuo)為基準字體(ti)）。

像(xiang)(xiang)彈性布(bu)(bu)局一(yi)樣，這種布(bu)(bu)局開始時最困(kun)難的一(yi)件事情就是(shi)(shi)(shi)計(ji)算(suan)合(he)適的em 值(zhi)。為了簡化從像(xiang)(xiang)素（px）到em 的轉化，可以設置body 中(zhong)10 像(xiang)(xiang)素的字體基準尺寸為0.625em 或者62.5%（多數瀏(liu)覽(lan)器中(zhong)字體的尺寸是(shi)(shi)(shi)16 像(xiang)(xiang)素[注釋(shi)]，10 像(xiang)(xiang)素是(shi)(shi)(shi)16

像素的(de)62.5%），這樣在(zai)計算字(zi)體(ti)的(de)子元素的(de)時(shi)候(hou)更容易(yi)些。例如(ru)，設(she)置頁面主體(ti)部分字(zi)體(ti)尺寸為(wei)0.625em，那么(me)一個(ge)960 像素寬(kuan)的(de)DIV 就是96em。

這些元素(su)的(de)(de)存在增(zeng)加了彈(dan)性布局(ju)(ju)的(de)(de)復雜(za)性，因(yin)為在字體的(de)(de)尺寸發(fa)生(sheng)變(bian)化(hua)時，需(xu)要維護布局(ju)(ju)中所(suo)有元素(su)的(de)(de)比例(li)關系。在一些情況下，彈(dan)性布局(ju)(ju)允許所(suo)有元素(su)隨著字體的(de)(de)增(zeng)加而變(bian)化(hua)，也(ye)就是說，圖片也(ye)會因(yin)為用戶(hu)設置的(de)(de)不(bu)同，跟著布局(ju)(ju)的(de)(de)變(bian)化(hua)放(fang)大(da)或(huo)者縮小。

當然，這(zhe)可以通過為圖(tu)(tu)(tu)片賦予類(lei)似＜img width=“80%” height=“80%” /＞ 的(de)(de)百分比(bi)單位(wei)值來(lai)解決。但是(shi)記住，低(di)分辨率(lv)的(de)(de)圖(tu)(tu)(tu)片放大(da)(da)后(hou)會極大(da)(da)地降(jiang)低(di)質量。瀏(liu)覽器(qi)進行的(de)(de)是(shi)“模擬”放大(da)(da)，導致圖(tu)(tu)(tu)片模糊并(bing)出(chu)現矩形塊。另外，瀏(liu)覽器(qi)會從服務器(qi)加(jia)(jia)載(zai)整個(ge)（大(da)(da)）圖(tu)(tu)(tu)片，并(bing)且進行縮放，增加(jia)(jia)了服務器(qi)的(de)(de)負載(zai)，提高了頁面(mian)的(de)(de)加(jia)(jia)載(zai)時間。因(yin)此，多數設(she)計師經(jing)常為圖(tu)(tu)(tu)片使用(yong)絕對(dui)值。

關于(yu)(yu)彈性布局，或者基于(yu)(yu)字體尺寸設置(zhi)寬(kuan)度(du)的(de)布局，人們還非(fei)常關心如何展(zhan)示(shi)多媒體內(nei)容，諸如圖片和Flash對象。

在Harvey Kane 的“Automatic Magazine Layout”（alistapart.com）一文中提到的另外一個解決(jue)(jue)方案需要用到一些數學和(he)PHP。文章(zhang)標題取決(jue)(jue)于雜(za)志中圖片是如何被顯示的：永(yong)遠完美的布局(ju)和(he)組(zu)織。看看下面的PHP 代碼。

我(wo)(wo)們(men)可(ke)以預先(xian)定(ding)義整個(ge)(ge)(ge)雜志設計布局(ju)需要使(shi)用的(de)(de)寬(kuan)度(du)。因此，如果能(neng)夠決定(ding)用戶瀏覽器的(de)(de)寬(kuan)度(du)，我(wo)(wo)們(men)就能(neng)夠計算出圖片布局(ju)應該有多(duo)寬(kuan)。這當然不難實(shi)現，因為在(zai)我(wo)(wo)們(men)的(de)(de)第二個(ge)(ge)(ge)技術：自適(shi)應的(de)(de)流(liu)式布局(ju)中(zhong)使(shi)用過。在(zai)這段代碼中(zhong)，Kevin Hale 使(shi)用了一個(ge)(ge)(ge)getBrowserWidth（）的(de)(de)函數(shu)。感(gan)興趣的(de)(de)讀者(zhe)可(ke)以看(kan)(kan)看(kan)(kan)他的(de)(de)文章，增加對這個(ge)(ge)(ge)方法的(de)(de)理(li)解。

如果(guo)能夠使用這個方(fang)法獲取到(dao)用戶(hu)瀏覽(lan)器的(de)(de)(de)(de)寬(kuan)(kuan)度數(shu)值(zhi)，我們就能根據這個數(shu)值(zhi)找到(dao)內容區(qu)域應(ying)該(gai)設置的(de)(de)(de)(de)像素(su)值(zhi)（或(huo)者用來存放圖片的(de)(de)(de)(de)區(qu)域的(de)(de)(de)(de)寬(kuan)(kuan)度）。假(jia)設我們希望(wang)放置圖片的(de)(de)(de)(de)內容區(qu)設置為70% 寬(kuan)(kuan)。我們只需要(yao)通過(guo)簡單的(de)(de)(de)(de)數(shu)學運算(suan)，來得到(dao)瀏覽(lan)器寬(kuan)(kuan)的(de)(de)(de)(de)70% 是多少像素(su)（px）。

像(xiang)素寬(kuan)度(du)= 內容區(qu)的百分比× 瀏覽器寬(kuan)度(du)。

運行后，調(diao)整腳本來自動(dong)找到圖片的(de)像(xiang)素寬度(du)，這樣就方便地為流式布(bu)局中的(de)圖片或者其他固定(ding)寬度(du)的(de)元素設置寬度(du)。

彈(dan)(dan)性布(bu)(bu)(bu)局(ju)(ju)的(de)最大(da)優點(dian)就是(shi)具(ju)備始終保持設計元素(su)比例關系的(de)能力，以及確保可讀性和(he)定(ding)位準(zhun)確。彈(dan)(dan)性布(bu)(bu)(bu)局(ju)(ju)是(shi)那些(xie)希望(wang)在流(liu)式布(bu)(bu)(bu)局(ju)(ju)和(he)固定(ding)寬度布(bu)(bu)(bu)局(ju)(ju)之(zhi)間妥協的(de)設計師(shi)的(de)首選。流(liu)式布(bu)(bu)(bu)局(ju)(ju)和(he)固定(ding)寬度布(bu)(bu)(bu)局(ju)(ju)的(de)優點(dian)在彈(dan)(dan)性布(bu)(bu)(bu)局(ju)(ju)中都有所(suo)體現。但是(shi)，這(zhe)種布(bu)(bu)(bu)局(ju)(ju)實現起來非常困難，在完成(cheng)之(zhi)前需要大(da)量的(de)深入理解和(he)測試。

現(xian)(xian)在， 我們繼續使用前面用過的HTML 結構(gou)來實現(xian)(xian)一個簡單的兩(liang)欄(lan)布局。如果1em 相(xiang)當于16 像(xiang)(xiang)素(su)，那么960 像(xiang)(xiang)素(su)就(jiu)是60em。左邊600 像(xiang)(xiang)素(su)是37.5em，右(you)側360 像(xiang)(xiang)素(su)是22.5em。為了方便使用，下面是計算公式：1em÷16 像(xiang)(xiang)素(su)×（像(xiang)(xiang)素(su)寬度）=em 單位。

設計社區中在熱(re)烈地討論靈活布局(ju)的生(sheng)命力(li)。下一代瀏覽器，諸如Firefox3+、Opera 9.5 + 和 IE 7+ 都帶來(lai)了一項似乎會(hui)減輕網站開發人員工作的特性—全頁(ye)面(mian)縮放（Full page zoom）。

不僅(jin)是(shi)簡單地(di)增加網站(zhan)中(zhong)(zhong)字體的(de)(de)尺寸，瀏覽器現(xian)在(zai)支持用戶自然地(di)縮(suo)放布局，包(bao)括布局中(zhong)(zhong)的(de)(de)圖片(pian)和(he)背景。整(zheng)個頁面設計(ji)都(dou)會(hui)根(gen)據(ju)選擇進行(xing)等比例(li)縮(suo)放。同時，所有的(de)(de)固定(ding)寬度布局也(ye)變(bian)成了“可變(bian)化的(de)(de)”。布局中(zhong)(zhong)始終包(bao)含內容的(de)(de)區域(yu)也(ye)支持這個特性。這樣，就不會(hui)出現(xian)在(zai)上一(yi)代網絡瀏覽器中(zhong)(zhong)經常(chang)出現(xian)的(de)(de)盒模型疊加的(de)(de)現(xian)象(xiang)。直觀地(di)講(jiang)，這項技術將會(hui)導(dao)致彈性布局的(de)(de)荒廢和(he)消(xiao)亡，因(yin)為他(ta)們達(da)到了需要C

SS 代碼才(cai)能實現的(de)同樣的(de)效果。

然而(er)，事(shi)實并非如(ru)此。正如(ru)Zoe Mickley Gillenwater 所指出的(de)（“為(wei)什么瀏覽器不能殺死彈性布局”，zomigi.com）。如(ru)果為(wei)用戶(hu)提供一(yi)個帶頁面(mian)縮(suo)放的(de)固(gu)定寬度布局，用戶(hu)看到(dao)每行的(de)字(zi)(zi)數會與設想的(de)不一(yi)致（例如(ru)，一(yi)些用戶(hu)因(yin)(yin)為(wei)視力的(de)原因(yin)(yin)會選(xuan)擇大一(yi)點的(de)字(zi)(zi)體）。

在固定寬度布局的頁面中，可變的字體尺寸使內容的顯示變得難以預測，同時也很難保留設計中的比例和平衡。另外，當頁面放大（或者縮小）時，某些情況下并不會放大Logo 或者圖標。換句話說，這種布局允許用戶只縮放固定的區域或者元素，這在瀏覽器縮放中是無法實現的。當然，基于像素布局的所有缺點仍然存在，包括水平滾動條和過多的空白。最后，全頁面縮放對滿足不同用戶需求有所幫助，但卻不是青島網站開發人(ren)員的(de)終極解決方案。