日期:2014-05-17  浏览次数:20701 次

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
版权所有 ? 转载时必须以链接形式注明作者和原始出处!