欧美全黄视频,美女视频一区免费观看,九九视频精品全部免费播放,夜夜爽av福利精品导航

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

由于不依賴于瀏覽器視口的變化，彈性布局有點類似于固定寬度布局，同時具備了它的優點和缺點。設置很大的字體尺寸會擴展布局的寬度和高度，最后布局變得無法使用和閱讀。但是，這種情況極少發生，因為很少有人會把字體放大3 倍（特別是設計師已經使用了一個足夠大的字體作為基準字體）。

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

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

這些元素的存在增加了彈性布局的復雜性，因為在字體的尺寸發生變化時，需要維護布局中所有元素的比例關系。在一些情況下，彈性布局允許所有元素隨著字體的增加而變化，也就是說，圖片也會因為用戶設置的不同，跟著布局的變化放大或者縮小。

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

關于彈性布局，或者基于字體尺寸設置寬度的布局，人們還非常關心如何展示多媒體內容，諸如圖片和Flash對象。

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

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

如果能夠使用這個方法獲取到用戶瀏覽器的寬度數值，我們就能根據這個數值找到內容區域應該設置的像素值（或者用來存放圖片的區域的寬度）。假設我們希望放置圖片的內容區設置為70% 寬。我們只需要通過簡單的數學運算，來得到瀏覽器寬的70% 是多少像素（px）。

像素寬度= 內容區的百分比× 瀏覽器寬度。

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

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

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

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

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

SS 代碼才能實現的同樣的效果。

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

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