HTML+CSSS3自动适应屏幕宽度笔记

 在公司新接到一个业务升级项目，其中一个小需求为：

【页面显示优化:自动调整页面 使页面在IE8 IE9 浏览器的  1024*768   和 1366*768分辨率下能完全显示】。

大概截图如下：

 这里是使用的1024*768的分辨率，顶部从右向左为login，headbar，logo三个div，前两个右浮动，最后一个左浮加载到顶部div中（前人写的代码，在这里不做讨论）。可以看到中间的headbar因为宽度不够盖到logo上面去了，这种情况是不被允许的。

 原先的CSS配置如下：

.header { position: absolute; cursor: default; width: 100%;}
.header table td{ text-align:left;}

.header .logo { float: left;position: absolute;}

.headerbar{float:right; width: 606px; height:90px; overflow: hidden; position:relative;}

.headermenu { list-style: none; height:90px; position:absolute; left:0;top:0; }/*  overflow: hidden; */
.headermenu li { float: left; width:100px; list-style:none; }
.headermenu li a { 
	display: blo