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: block; font-family: 'RobotoCondensed', Arial, Helvetica, sans-serif; color: #fff;
text-transform: uppercase; padding: 14px 10px; text-decoration:none; cursor: pointer;
min-width: 80px; text-align: center;
}
.headermenu li a span {opacity: 1; }
.headermenu li a span.icon { height: 36px; display: block; margin-bottom: 10px; }

(headermenu是headbar中的子元素)

在网上搜索一番，找到这个解决方法：

CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

@media screen and (max-device-width: 400px) {

.column {
float: none;
width:auto;
}

#sidebar {
display:none;
}
}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

于是乎，笔者做拿过来应用并根据自身项目做了一些小调整。在上面贴出来的CSS代码的后面添加下方显示代码。

因为CSS文件的加载时可覆盖的，所以只需要把需要更改的部分写在下面就可以。这个时候注意一下两种分辨率的判断顺序，小的部分写在下面。

/*设置屏幕宽度小于1366px时，使用下列属性*/
@media screen and (max-device-width: 1366px) {
/*下面的width设置为406只是在显示时做区分，因为客户的页面图标有6个，所以宽度还是要使用606*/
.headerbar{float:right; width: 606px; height:90px; overflow: hidden; position:relative;}

}

/*设置屏幕宽度小于1024px时，使用下列属性*/
@media screen and (max-device-width: 1024px) {

.headerbar{float:right;width: 336px; 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
aa3c
:50px; list-style:none; }
.headermenu li a {
display: block; font-family: 'RobotoCondensed', Arial, Helvetica, sans-serif; color: #fff;
text-transform: uppercase; padding: 14px 10px; text-decoration:none; cursor: pointer;
min-width: 30px; text-align: center;}
.headermenu li a span {opacity: 1; }
.headermenu li a span.icon { height: 36px; display: block; margin-bottom: 10px; }
}

运行后，大功告成，效果如下：



这里仍然是1024*768像素取的例子。虽然样子丑了点，但是基本的需求已经实现，后期再调试就可以了。

以上为个人工作学习记录，感谢阅读。

不积跬步无以至千里，不积小流无以成江河。

致谢：欲思博客 » HTML5+CSS3的响应式网页设计：自动适应屏幕宽度