对于前端的同学来说,网页布局就是其基本功,不会页面布局就不是一个合格的网页重构师。 在我们的日常工作中,我使用的最多的布局方式莫过于固定宽度式布局。反正,我所工作过的公司基本上都是使用固定式页面布局。为什么固定宽度式布局使用最广泛,原因很简单,因为简单粗暴上手简单。流体式及弹性布局比较多的使用在论坛网站,或者个人博客中。

刚才我也说到固定宽度式布局是目前国内最常用的布局方法,优点就是固定宽度使得其布局最简便,使得开发人员对布局和定位有更大的控制能力。但是,固定宽度的布局也有缺点,因为它的宽度是固定的,无论窗口尺寸有多大,它的尺寸总是不变,所以无法充分利用可用空间。因此,它们也常常被认为是糟糕的权宜之计。

多说无益,先看个固定宽度的布局的示例,这个大家都是拿手布局方法。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大家可以下载来看看猛点这里

 

 posted on 2014-04-21 09:22  琦恒  阅读(5051)  评论(6编辑  收藏  举报