我們可以根據網頁布局的寬度設置將其分為3種類型：固定寬度、可變（或不固定）寬度和彈性寬度。還可以通過混合不同的度量單位將這些布局合并為混合布局，設計的每一個分欄都可以使用不同的單位。這4種布局類型中的任何一種都可以使用任意數量的分欄或者美化主題，布局類型直接地決定了瀏覽設備如何在用戶面前展現布局的寬度。

固定寬度布局(fixed-widthlayout)是以前最常見和最常采用的設計，固定寬度設計的整體布局寬度以像素為單位來設置，具體值由設計者決定。通常，設計者基于最常見的屏幕分辨率(例如，800×600和1024×768)來選擇寬度。

固定寬度設計是固定不變的，它們的尺寸不會隨著用戶的設置而變化。這樣一來，即便是存在不同的用戶設置，你也可以創建一個包含豐富圖像的網頁，并且能讓它看上去緊湊一致。如果你對站點的目標用戶進行了調查，那么你就能設計出符合大多數用戶瀏覽器窗口的布局，并且可以確保將文本行之間的寬度設置為一個便于閱讀的理想值。

1．并非所有人都使用16像素的文本

如果你知道所處理文本的大小，那么你可以選擇一個固定的寬度來優化每行的字符數或者行長以提高易讀性。印刷設計師們一直都在做這一工作：RobertBringhurst的名作《印刷樣式元素(TheElementsofTypographicStyle)推薦的行長為45至75個字符。這是基于數年對印刷文本易讀性的調查研究所得出的結論。根據對屏幕顯示文本易讀性的最新調查研究表明，75到100個字符之內，行長越長，閱讀速度越快（盡管很多受測試用戶表示他們更喜歡短一些的文本）。

2．屏幕分辨率并不等同于瀏覽器窗口大小

固定寬度布局的大問題在于，它們本質上取決于你估計何種寬度會最適合大多數用戶。即便是你的網頁統計軟件可以告知每個用戶屏幕分辨率——即便是你正在制作一個內聯網并且確定只會使用單一的分辨率——屏幕的分辨率也并非總是能夠與瀏覽器窗口相匹配。有一些人不會使用大化的瀏覽器窗口進行瀏覽（不能否認，這是很少的一部分人，但是隨著顯示器和分辨率大小的增加，這類人的數量也在增加）。另外，還有一些人會使用占用了可用寬度數百像素的瀏覽器工具條。固定寬度設計帶來的后果往往是，相對于瀏覽者的窗口而言，某些瀏覽者看到的設計不是過寬（迫使他們不停地拖動水平滾動條）就是過窄（使得布局的一側或者兩側留下大量空白）。根據我對用戶所做的測試，很多人幾乎都對瀏覽器中“被浪費的空間”或者費勁地拖動水平滾動條表示苦惱不堪！

不過，在網絡中，我們無法知道用戶的文本大小，瀏覽器默認值為16像素，絕大多數用戶會對其文本使用該默認值。然而，有些用戶還是會更改該默認值，或者將用戶樣式表設置成格式文本以便更易閱讀。甚至，如果文本的某一頁讀起來很費勁（即便是像素可調的文本，InternetExplorer6以及更早版本的瀏覽器中的文本除外），那些對該文本使用默認值的用戶也會增加每頁文本的大小。因此，如果你為16像素大小的文本進行行長優化，你或許是在為絕大多數訪問者進行易讀性優化工作，但并不是為所有的訪問者。不要誤解我的意思；為絕大多數人設計是一件好事。只是不要錯誤地認為“絕大多數”等同于“所有“。

另一個問題是，這些對行長的研究并未考慮到會促使特定群體更傾向于更短或是更長行長的各種不利條件。盡管我認同設計師的工作多半是圍繞用戶需求并以最有利于用戶的方式而展開（因為用戶自己并不知道什么是最好的），但是有時候還是需要讓用戶自己而不是我們，去更好地了解什么才能好地滿足他們的需求。至少，我們可以根據自己認為的能夠幫助絕大多數用戶的考慮來優化設計，不過要告知用戶為了更好地滿足其需求而需適應我們的設計的可能性一——這是印刷以及更為固定的媒介無法獲得的一大優勢。

分享文章：網站制作中的靈活布局詳解
網址分享：http://m.js-pz168.com/news12/82112.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站制作等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯