真的是时代变了，看以前讲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...

图丢了