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

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

由于(yu)(yu)不依賴于(yu)(yu)瀏覽器視口的(de)(de)變(bian)(bian)化，彈性布(bu)局(ju)(ju)有(you)點類似于(yu)(yu)固定(ding)寬(kuan)(kuan)度(du)布(bu)局(ju)(ju)，同(tong)時具備了(le)它的(de)(de)優點和缺點。設(she)置很大(da)的(de)(de)字(zi)體尺寸會擴(kuo)展布(bu)局(ju)(ju)的(de)(de)寬(kuan)(kuan)度(du)和高度(du)，最后布(bu)局(ju)(ju)變(bian)(bian)得無法使用和閱讀(du)。但是，這(zhe)種情(qing)況極少(shao)發生，因(yin)為很少(shao)有(you)人會把字(zi)體放(fang)大(da)3 倍（特別是設(she)計師已經使用了(le)一(yi)個足(zu)夠大(da)的(de)(de)字(zi)體作為基準字(zi)體）。

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

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

這(zhe)些元素的(de)(de)存在(zai)增加(jia)了彈(dan)(dan)性(xing)(xing)布局的(de)(de)復雜(za)性(xing)(xing)，因為在(zai)字(zi)體(ti)的(de)(de)尺寸發生(sheng)變化時，需(xu)要維護布局中所(suo)有(you)元素的(de)(de)比例關系。在(zai)一些情況下，彈(dan)(dan)性(xing)(xing)布局允許所(suo)有(you)元素隨(sui)著(zhu)字(zi)體(ti)的(de)(de)增加(jia)而變化，也(ye)(ye)就是說(shuo)，圖片也(ye)(ye)會因為用戶設置的(de)(de)不同，跟著(zhu)布局的(de)(de)變化放大或者縮小。

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

關(guan)于(yu)彈(dan)性(xing)布(bu)局(ju)，或(huo)者基于(yu)字體尺寸設置寬度(du)的布(bu)局(ju)，人們還(huan)非常關(guan)心如何(he)展示多媒體內容，諸(zhu)如圖片和Flash對象。

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

我(wo)們可(ke)以(yi)預先定(ding)(ding)義整個雜(za)志設計布(bu)局(ju)需(xu)要使(shi)(shi)用(yong)的寬(kuan)(kuan)度。因此(ci)，如果能夠決定(ding)(ding)用(yong)戶瀏(liu)覽器的寬(kuan)(kuan)度，我(wo)們就能夠計算出圖片(pian)布(bu)局(ju)應(ying)該有多寬(kuan)(kuan)。這(zhe)(zhe)當然(ran)不難實現，因為在我(wo)們的第二個技(ji)術：自(zi)適應(ying)的流式布(bu)局(ju)中使(shi)(shi)用(yong)過(guo)。在這(zhe)(zhe)段代碼(ma)中，Kevin Hale 使(shi)(shi)用(yong)了一(yi)個getBrowserWidth（）的函數。感(gan)興趣的讀者可(ke)以(yi)看看他的文(wen)章，增加(jia)對這(zhe)(zhe)個方(fang)法的理解(jie)。

如果能(neng)夠使用(yong)這個(ge)方法獲取到(dao)用(yong)戶瀏覽(lan)(lan)器(qi)的(de)寬(kuan)(kuan)度(du)數值，我(wo)們(men)就能(neng)根據這個(ge)數值找到(dao)內(nei)容(rong)區(qu)域應該設(she)置的(de)像素值（或者用(yong)來存(cun)放圖(tu)片的(de)區(qu)域的(de)寬(kuan)(kuan)度(du)）。假(jia)設(she)我(wo)們(men)希望放置圖(tu)片的(de)內(nei)容(rong)區(qu)設(she)置為(wei)70% 寬(kuan)(kuan)。我(wo)們(men)只(zhi)需要通過簡單的(de)數學運(yun)算，來得到(dao)瀏覽(lan)(lan)器(qi)寬(kuan)(kuan)的(de)70% 是多(duo)少像素（px）。

像素(su)寬(kuan)度= 內容區的百(bai)分比(bi)× 瀏覽(lan)器寬(kuan)度。

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

彈性(xing)布(bu)局的(de)最大優(you)點(dian)就是具備始終保(bao)持設計(ji)元素比例關(guan)系的(de)能力(li)，以及確保(bao)可(ke)讀性(xing)和(he)定(ding)位準確。彈性(xing)布(bu)局是那些希望在流式(shi)布(bu)局和(he)固定(ding)寬度(du)(du)布(bu)局之間妥協的(de)設計(ji)師的(de)首選(xuan)。流式(shi)布(bu)局和(he)固定(ding)寬度(du)(du)布(bu)局的(de)優(you)點(dian)在彈性(xing)布(bu)局中都有所體(ti)現。但是，這種布(bu)局實現起來非(fei)常困難，在完成之前需要大量(liang)的(de)深(shen)入(ru)理(li)解和(he)測試(shi)。

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

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

不僅是(shi)簡單地(di)增加網站中(zhong)字體(ti)的(de)尺寸，瀏覽器現在支持用戶自然地(di)縮(suo)放布(bu)局，包(bao)(bao)括(kuo)布(bu)局中(zhong)的(de)圖(tu)片和(he)背景。整個頁面設計都會根據選(xuan)擇進行等比例縮(suo)放。同時，所有的(de)固(gu)定寬度布(bu)局也(ye)變成了(le)“可變化的(de)”。布(bu)局中(zhong)始終包(bao)(bao)含內容的(de)區域也(ye)支持這(zhe)個特性。這(zhe)樣，就不會出(chu)現在上一(yi)代網絡瀏覽器中(zhong)經常出(chu)現的(de)盒模型疊加的(de)現象。直觀地(di)講，這(zhe)項技術將會導致彈性布(bu)局的(de)荒廢(fei)和(he)消亡，因為(wei)他們(men)達(da)到了(le)需要C

SS 代(dai)碼才能實現的同樣的效果(guo)。

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

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