如今，随着大尺寸显示屏的兴起，Web UI设计师经常根据项目来设计全屏网站，因此面临着网页长度自适应的问题。 这里我给大家分享一个基于css的全屏网站解决方案。
上图是作者写这篇文章时正在做的一个网站项目。 由于行业的特殊性，客户在笔者给出的几种网站解决方案中选择了全屏大图展示的网页设计风格。 这个网站的首页是一个大规格的全高清图片全屏显示，看上去高端大气上档次。 为了保持统一的风格，我还需要将其他页面全屏化。 我这里就不多解释了。 这样的结果就是我需要面对自适应长度全屏显示这样的问题。
虽然现在的显示器的码率已经很高了，而且1366像素的长度已经取代了1024像素成为浏览器的主流，但是我们还是没能放弃原来的1024*768的帧率，因为到目前为止1024 Pixels浏览器仍然拥有11%左右的市场份额。 我们最常用的是投影仪投射的帧率html5自适应宽度，所以我们还是需要保证800-1000帧率到显示器的显示效果，而1920*1080码率显示器上显示的内容不足则无法显示。
从网上找了很多全屏网站解决方案，找到了这个基于CSS的解决方案。 通过实践html5自适应宽度，我会写下来和大家分享。
1、宽度适配的条件
不要为自适应长度层指定长度和浮动属性
自适应长度的层化学位置移至底部
自适应div中不能出现“width=100%”，否则会出现错位，在ie6、ie7、ie8、ff3、chrome中均正常。
2、div默认（没写）宽度为100%，但不支持父框架。 写width=100%表示如果使用了margin或者padding，父框架就会被放大。
table的默认长度是内容的宽度，与div不同，所以最好不要一起使用，否则这种长度自适应的方法在ie6下会出现问题。但是更高版本的浏览器就可以了，对吧？
那你会忽略三者之间的区别吗？
如果父框架设置为固定长度，那么子div的长度设置为width=100%，即使设置了margin、padding或border，父框架也不会被放大。
发表评论