Eisen's Blog

© 2023. All rights reserved.

css 对大布局不必再用百分比,给一个固定宽度吧

May 12, 2011

cssgreasemonkeystylishuserscriptweb

真的是时代变了,看以前讲css的书,都说要考虑不同用户的显示屏大小的差异,建议用百分比设定body下的第一层div可以适应给用户一个更好的体验。

div.top_wrap {width: 80%;}

但是,对于现代的浏览器,不能在这样了。今天偶然见发现coolshell和infoq关于敏捷的口水大战,在chrome下调整页面大小的时候发现一个问题: 随着我对页面的放大,页面中的主体部分却越来越小了!然后,整个页面还是覆盖了整个屏幕,没有出现横轴的滚动条

图丢了

这让人很郁闷,我在firefox和chrome下测试放大效果都会产生这样的结果,这到底是为什么呢?

经过我的一番测试,发现对于最外层的wrap元素,如果没有设定一个宽度,或者设定了一个百分比的宽度就会出现这个问题。下面是我对一个非常简单的页面的测试。

图丢了

页面的结构非常简单,如下图

图丢了

最外层的 div, id=container 有一个 css 样式 width: 1080px,当我们对这个页面进行放大会出现下图的效果

图丢了

注意,底端出现了横向滚动条,页面整体都变大了,是个比较合理的结果,这样我们可以忽略右侧的次要内容。 但是如果我把这个 width 调整成 width: 80%,当我们放大页面就会出现这样的效果

图丢了

整个页面将会全部出现在你当前的屏幕上,但是内部的字体会大很多...这样是不是很崩溃。 真的是时代变了,尤其是用户端可控制的东西越来越多了,比如 greasemonkey 里的userscrpt 或者是 chrome 的 stylish 这样的插件,让你的页面变得更适应自己的需求。如下图,就是我用 stylish 做的对 google 查询结果的小美化实例,很多大牛可以把它做的让你认不出那是 google...

图丢了