从cnblog谈谈网页的全屏设计

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/iteye_6254/article/details/82359009

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

其实为了适应如此之多的显示器,要做到适合绝大多数人的全屏不是一件容易的事情。一般网站都将显示范围控制在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

展开阅读全文

没有更多推荐了,返回首页