網頁的三種布局(固定寬度式,流體式,彈性式)

對於前端的同學來說，網頁布局就是其基本功，不會頁面布局就不是一個合格的網頁重構師。 在我們的日常工作中，我使用的最多的布局方式莫過於固定寬度式布局。反正，我所工作過的公司基本上都是使用固定式頁面布局。為什么固定寬度式布局使用最廣泛，原因很簡單，因為簡單粗暴上手簡單。流體式及彈性布局比較多的使用在論壇網站，或者個人博客中。

剛才我也說到固定寬度式布局是目前國內最常用的布局方法，優點就是固定寬度使得其布局最簡便，使得開發人員對布局和定位有更大的控制能力。但是，固定寬度的布局也有缺點，因為它的寬度是固定的，無論窗口尺寸有多大，它的尺寸總是不變，所以無法充分利用可用空間。因此，它們也常常被認為是糟糕的權宜之計。

多說無益，先看個固定寬度的布局的示例，這個大家都是拿手布局方法。html代碼：

<div class="content">
     <div class="primary">
            <div class="primary"></div>
            <div class="secondary"></div>
      </div>
      <div class="secondary"></div>
</div>

        

css樣式代碼：

.wrapper {
  width: 920px; 
  margin: 0 auto; 
}

.content {
    overflow: hidden;
}

.content .primary { 
  width: 670px;
  float: right;
}

.content .secondary { 
  width: 230px;
  float: left; 
} 

.content .primary .primary {
    width: 400px;
    float: left;
}

.content .primary .secondary {
    width: 230px;
    padding-right: 20px;
    float: right;
}

以上就是我們經常在工作中應用到的固定寬度布局。

下面我們接着看流體式布局，與固定寬度布局有什么不一樣的地方，在使用流體式布局時，尺 寸是使用百分數而不是像素設置的，這使得流體式布局相對於瀏覽器窗口進行伸縮。隨着窗口變大，列寬也會變寬。反之，隨着窗口變小，列的寬度也變小。流體式布局可以非常高效的使 用空間。但是，流體式布局必然也有其問題，在窗口寬度較小的時候，行變的非常窄，很閱讀 。因此，有必要添加以像素或em為單位的min-width，從而防止布局變得太窄。但是，如果min-width設置的太大也會遇到與固定寬度布局相同的限制。

首先，將容器寬度設置為窗口總寬度的百分數，接着以容器寬度的白分數形式設置主內容和次要內容區域的寬度。

頁面的布局和固定寬度的html代碼一致。

css代碼如下：

.wrapper {
  width: 76.8%; 
  margin: 0 auto; 
  max-width: 125em;
  min-width: 76em;
}

.content {
    overflow: hidden;
}

.content .primary { 
  width: 72.82%;
  float: right;
}

.content .secondary { 
  width: 25%;
  float: left; 
} 

.content .primary .primary {
    width: 59.7%;
    float: left;
}

.content .primary .secondary {
    width: 34.33%;
    padding-right: 2.63%;
    float: right;
}

這個流體式布局現在就可以根據窗口變動而變化。

上面談到流體式布局可以充分利用空間，但是在大分辨率顯示器上，行仍然會過長，讓那個用戶不舒服。相反，在窄窗口中或者在增加文本字號時，行會變得非常短，內容很零碎。對於這個問題，或許下面的彈性布局是一種解決方案。

彈性布局相對於字號(而不是瀏覽器的寬度)來設置元素的寬度，以em為單位設置寬度。可以確保在字號增加時整個布局隨之擴大。這樣就可以將行保持在可閱讀的范圍。當然啦，於其他布局一樣，彈性布局也有一些問題與固定寬度布局相同，不能充分利用可用空間。另外，因為在文本字號增加時整個布局會加大，所以彈性布局會變得比瀏覽器窗口寬，導致水平滾動條出現。為了，防止這種情況，可能需要在容器div上加上max-width為100%，ie6不支持max-width， 如果確實要兼容IE6，就必須使用javascript。

彈性布局的關鍵技巧在於設置基字號，讓1em大致相當於10像素。我們知道大多數瀏覽器的默認字號是16像素，10像素大約是16像素的62.5%，所以在主體將字號設置為62.5%就可以了。

布局代碼還是一樣，主要css不一樣：

body {
  font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, 

sans-serif;
  background-color:#D4D4D4;
}

.wrapper {
  width: 92em;
  max-width: 95%;
  margin: 0 auto; 
}

.content {
  overflow: hidden;
}

.content .primary { 
  width: 72.82%;
  float: right;
}

.content .secondary { 
  width: 25%;
  float: left; 
} 

.content .primary .primary {
    width: 59.7%;
    float: left;
}

.content .primary .secondary {
    width: 34.33%;
    padding-right: 2em;
    float: right;
}

大家是否從示例中領會到布局的精髓呢，大家可以親手試試。其實在國外，流體式布局及彈性布局已然使用很廣泛，只是在國內，運用還是相對較少。

這里是剛才布局模式的demo大家可以下載來看看猛點這里