网站设计最初出现的时候,几乎是清一色的固定尺寸布局。因为那个时候电脑硬件的价格仍然算是比较昂贵的,显示器的更换与更新速度都非常缓慢,可能5、6年的时间绝大部分用户都是使用着同一个尺寸的屏幕。在这种情况下,流体布局和弹性布局似乎没有什么价值。而且,固定尺寸的布局可以让资源紧张的屏幕空间得到充分利用。
后来的一段时间,显示器的屏幕出现了非常多种尺寸,固定尺寸的布局在不同分辨率的屏幕下效果相差很大。对于小尺寸屏幕来说,固定尺寸还会导致非常令人讨厌的横向滚动条,一个页面同时出现两个滚动条是非常糟糕的,想想在Google的网站中你见过几个滚动条?
于是理所当然的,流体布局就成为了主流。流体布局最大的好处就是让设计以完全同等的比例出现在各个尺寸的屏幕中。不会出现小屏幕下有横向滚动条,也不会出现大屏幕下左右两侧的大片空白区(对于非居中设计来说,固定布局的问题更糟糕)。
但最近这一两年来,虽然屏幕的尺寸种类日益增多,却有很多设计师开始重新热衷于固定尺寸布局。这个,与其说是固顶布局的优秀,到如不说是流体布局的失败。之所以说它失败,我个人认为原因主要有以下两个。
一、IE6的对浏览器市场的主宰地位。
这不是习惯性的批判,而是IE6对于CSS标准中有太多属性不支持,尤其是流体布局中非常重要的min-width 和max-width属性。当一个页面内容很多的时候,必须有足够的宽度来显示,即使出现横向滚动条也比页面挤压混乱要好;当屏幕尺寸过大时,又必须有一定的宽度上限,否则一些元素的间距将大得过分,文本区域的行长也将过大而导致阅读的不便。虽然这两个属性可以通过javascript来在IE6中实现,但让IE7和FireFox等高级浏览器替换掉旧的IE6才是最终的、最好的方法。
二、有太多元素的尺寸是固定的。
文本区域用比例设置宽度,可以在不同屏幕下自动缩放,可背景图像是不会随着屏幕自动缩放的。即使可以,这种缩放也将导致背景图像的严重失真走样,没有人想看到你logo中的锯齿边缘,也没人想看到比正文还小的logo标题字。在blog中,或多或少的都有在sidebar中放一些第三方的功能代码。而这些第三方产品的尺寸几乎100%是固定的,就算可以自定义尺寸,也不是按照你整体布局中的百分比来定义,而是px。
目前能做的,主要是用js文件来修正IE6中的问题,采用部分固定、部分流体的布局方式(例如sidebar固定而正文自动适应宽度),对图像的边缘进行渐变以实现与背景的融合等等(对于边缘太明显的图片你要怎么对付?单纯的缩放肯定是不行的)。
而这些问题在固定尺寸布局中根本不需要担心,我相信没有任何一个设计师会以修复Bug为乐,因为他们不是修理工,也不是商家。虽然固顶布局从访客心理上来讲不是最好的,但目前使用1024X768屏幕的用户大概占到了75%,加上相近似的几个尺寸屏幕,固定布局仍然可以让80%以上的访客收到很好的浏览效果;而事实上流体布局也未必就能让更多的访客浏览效果改善,能达到90%我看就不错了。
用em作为尺寸单位,至多是可以保持字体缩放时的布局不被破坏,但对于屏幕尺寸差异造成的问题几乎没什么帮助。另外,除了那些字体非常小的外文网站,你平时会经常使用文字缩放吗?你周围的人又有几个会用这个功能呢?
流体布局,依然是个有很大改善空间的布局方式。
PS:盘古的服务器在经历一次大维护之后,我已经彻底无法用客户端发表文章了,明明就把cgi文件属性设置成了755,mt-xmlrpc.cgi却还是返回500 Error错误信息。
引用地址:64
用em作为尺寸单位,有很大的继承BUG。。很头疼。
评论者: 路杨 | 07月02日13时52分
主要是觉得现在很大分辨率的也不太多吧。
所以做成固定宽度在稍小于800应该还可以吧,不至于在800X600里面显示横向滚动条,在大分辨率下也不会两侧留太多空白。
你这一套模板,如果吧最右边那列做成在小分辨率下浏览时自动移动到第二列的下方就好了
评论者: dimlau | 07月02日15时04分
@路杨,
那个问题的确很头疼,到目前位置我都还不敢用em做尺寸单位,一层层的继承让尺寸的计算变得非常啰唆,而且实际用处感觉也不是很大。
@dimlau,
现在最麻烦的是logo在小分辨率下根本显示不完整,sidebar合成一栏的话,整体是好了点,但sidebar的高度就大得有点吓人了。本来我做三列布局就是为了避免sidebar过长的问题。
评论者: leavic | 07月02日16时38分
呵呵,感谢您,我不准备买盘古的空间了,Cpanel就Cpanel吧!
评论者: 偶爱偶妻 | 07月04日09时55分