网页设计CSS布局该如何进行方式比对( 二 )



2.3弹性布局

我们了解了在流式布局下,如果用户浏览器窗口变宽,网页内容会变得很难阅读 。如果我们想要能够随着网页元素大小的变化而变化的页面布局 。如字体变小,栏长度及页面宽度都会相应减少,反之亦然 。弹性布局,就能够实现 。弹性布局如果用固定宽度布局转换也非常简单,只需要对度量单位进行修改即可 。弹性布局(ElasticLayout),指网页宽度不固定,当你改变字体的大小,其他元素也会随之发生变化 。我们的布局以字体的大小来进行参照变化的 。那么这时我们就用em(字体高)而不是用像素值或百分比来定义宽度 。em直接表现了字体的大小,因此如果用em表示一个包含框的宽度,当你增加字体大小时,包含框的宽度也会随之增加 。这对于视力弱或有认知障碍的人尤其有用 。弹性布局的效果是明显的,也受到广大设计师的欢迎 。但它也是有局限性的 。如果不对这种布局设置一个最小宽度,当用户缩小窗口到足够小时,会对布局产生的影响是致命的,造成布局严重错位 。当然图片的随比例缩放问题,也是一个有待解决的问题 。

2.4可变固定宽度布局

可变固定宽度布局(VaribleFixedWidthLayout又叫做分辨率布局方式)指在CSS代码中设计好关于各种浏览器类型所需要的不同尺寸,实现根据浏览器类型自动调用不同的CSS布局 。这种布局方法的思想是布局能够自动变化以提供最适合用户窗口大小的布局效果 。例如如果浏览器窗口足够大,那么布局可能包括产生3个固定宽度的列,如果窗口宽度小于某个特定宽度时,那么某一列将无缝地放在另一列下面,从而产生一个两列的布局 。运用该布局最可靠的方法就是通过用javascript来自动评估窗口宽度,从而改变网页上所运用的CSS规则 。这里指的宽度,是你正在浏览的窗口的宽度 。使用这种技术,你可以将页面的某一个视图,作为默认页面,但是对于正在用大窗口访问你的站点的用户来说,你的页面会相应的放大至整个窗口 。这种布局与流动式布局不同 。流动式布局是当你移动浏览器时,它的尺寸在不断的重新设置,而这种布局一旦达到了一个“触发”点,布局才会改变并进而影响到内容 。缺点是可能会导致一些跨平台的问题出现 。

2.5混合布局

顾名思义就是集中各种布局方法组合起来使用,取各自之所长 。可以想象,各种布局都有它的优缺点 。就例如弹性布局来说,它随着元素的大小而相应发生改变 。可是万一它们将东西放得太大,页面超出了浏览器窗口,那怎么办?可能这时,你就想取回一部分的控制权,于是就有了混合性布局 。可以用em(字体高)定义文本的尺寸、包含框、导航区和内容块的宽度 。但是却为max-width属性设置一个百分比,限制它变得过大,而造成的布局混乱 。组合流式布局与弹性布局,以em设置宽度,以百分比设置最大宽度 。这就是一种典型的混合式布局 。这样的布局方式在极端情况下都能有较好的整体效果 。所以,我们说混合布局是结合各个布局的优缺点及布局人员的需要而组合使用的一种良好的布局方式 。

3小结

综上所述,层叠样式表运用在网页布局上的方式多种多样,而我们评价哪种布局方式好的最终目标不是针对它的各种优缺点,而是从三个相关方面来进行探讨:可读性、适应性(方便性)及未来的可维护性 。对于网页设计人员来说,选择布局方式同时来源于你网站客户端的需求 。只有充分考虑协调好以上各方面,才能实现网站价值的最大化,并且提高网站的竞争力 。

推荐阅读