css+div中的百分比自适應寬度布局

      在css頁面布局中，我們常常會遇到适應顯示器分辨率的問題，目前主流的1440*900，筆記本中主流的1280*800，目前上網本的1024*600，還有一些老的17寸1024*768。甚至還有一些追求最新的，用的更大的顯示器。我們要讓自己網站在各種分辨率下都顯示正常，達到最理想的顯示效果。就需要讓自己的網站自适應顯示器的寬度。

一種簡單的方法是兩列的網站，一列設定固定寬度，另外一列使用auto，讓其自适應浏覽器寬度，自使用寬度的部分多為大段文字，這樣可以達到自适應寬度的目的。但是當内容相對複雜的時候會有一個問題，當顯示器過寬的時候，固定寬度的部分就相對太窄了，這樣影響整體效果。我們需要的是當頁面變寬的時候，每一部分都随着改變。這樣，我們就用到了百分比布局。

     在使用百分比布局的時候需要注意的幾點：

1.你所設定的百分比，是針對他的父級元素來說的，而不是浏覽器的寬度。

2.當你設定了width：100%時，請避免設定margin和padding。因為你的div實際寬度将是width+margin+padding 進而大于外框。

3.每一行中，如果存在多個div，盡量不要讓他們的總寬度剛好等于100%。

原因是，當像素數出現小數時，浏覽器是采取四舍五入的方式計算的。比如你的外框是11像素寬，裡邊的兩個div的寬帶均設定為50%，則計算為5.5px,浏覽器四舍五入的算法得出6px，是以總寬度将變成12px，超出了外框的總寬度。是以我們在設定的時候盡量不要把總寬度設定成100%。

4.為整個網站設定最小寬度，為了保證使用者在任何浏覽器視窗中都能正常浏覽，避免那種極端小的浏覽器視窗，你可以寫上min-width 以保證頁面不變形，在浏覽器視窗極小時出現橫向滾動條。但是IE6是不支援此屬性的，可以針對IE6使用js控制一下。

       堅持了上面的幾項，你就能像使用像素來布局的一樣通過css順利的布局了。

文章作者：IceSun

本文位址：http://www.iscss.tk/?p=72

版權所有 © 轉載時必須以連結形式注明作者和原始出處！