从cnblog谈谈网页的全屏设计

网页多宽才能用户好的体验？其实用户希望你的网页时全屏的，我打开一个网页，干嘛老是那么宽的空白，留着这么多的空白不用，非要让我来翻页。。

其实为了适应如此之多的显示器，要做到适合绝大多数人的全屏不是一件容易的事情。一般网站都将显示范围控制在1024以内，超过1024有些显示器就会出现横向滚动条了，用得最多的还是960px的。然后用一张背景图片填充完左右的空白。

但是感觉这种做法实在是不负责任的。尤其是对于一个文字为主的网站来讲，更多的文字内容能带来更好的阅读体验，而且当文字的区域太窄，中文字体在右边往往显得层次不齐。cnblog可能是在这方面做得最好的了。

我们先来研究cnblog的一个博客的网页，然后分析它的css。这里先讲讲重点。

要实现全屏需要坚持一些原则：

1.尽量少给元素定义宽度，特别是那些控制整个布局的div元素。你可以用百分比，但我曾经尝试过，效果不好，而且你需要时常去计算到底该百分之多少。使用百分比感觉是被牵着鼻子走，元素的宽度应该用内容来填充，而不是自己定义。

2.巧妙的运用margin。假如元素没有宽度，那不是每个div都占满整个网页了吗，那我要向左右两栏或者分三栏显示怎么办。margin可以解决这个问题。

3.一定要记住，你的网页内容是流水一样的灵动，别对他做过多的限制。

4.即时是全屏的网页，至少还是在左右留下一点空白，和浏览器边界贴得太紧让人很有压力。

现在在说说实现自适应网站的难点。

其实难点不在于全屏，想让网站全屏你只要不给block元素指定宽度就可以了。

这里以三栏的网页布局为例。指定两边栏目的宽度，中间自动填满剩下的。

难点一：ie下margin引起的横向滚动条bug

因为刚刚我说需要给浏览器两边留下一点空白，于是我指定了magin-left:15px;margin-right:15px;这样两边会留下15px的空白，并且是居中的。

我是在firefox下面测试的，页面的显示效果很好。但是拿到ie下面就出问题了，ie的横向滚动条出现了，是滚动条很普遍，但没看到谁允许横向滚动条出现。而且这可是在ie9下面，更不用说ie7一下了。

解决办法：给这个元素加上overflow:hidden;(到现在为止我都没彻底弄懂overflow，貌似用好了能解决很多小bug）

难点二：因为长语句而引起的div宽度过于宽大

你应该注意到，我们三栏的布局中有一个是没有定义宽度的，这个是为了是网页的大小适应不同的屏幕，但没有限制宽度，自然会带来一些意想不到的问题。如下图：

 

 

 

红颜色标注的地方有一个很长的不换行字符串（举例说明实际有时候更长），这个字符串让中间没有限制宽度的div足足有1300px宽，加上两边侧栏的宽度浏览器就会出现横向滚动条，理论上说，不管你的显示器多大，都可能出现横向滚动条，因为一个不换行的字符串可以无限长。

解决办法：还没有很好的解决办法。。。。这里有两种差强人意的办法供参考。

1.用js根据屏幕宽度修正。

2.什么都不用做，发表文章的时候注意换行就是了，因为一个句子太长本来就是不合理的，不过这只适用于个人网站，网友发表的文章你不可能每篇都编辑。

3.定义一个最大宽度，这样肯能有点违背全屏设计的初衷。

本文未完，原文发表在 http://jcodecraeer.com/a/cssjiqiaoyuguifan/2012/0613/247.html