html布局的一种宽度自适应解决方案

对html布局而言，传统的960px『或者鄙人常用的980px』宽度在大分辨率显示上显示时左右两边则会留下富余的空白空间，当分辨率达到23寸的1920px时传统的980px宽度网页布局则意味着显示器上的一半宽度的位置被闲置......

考虑到17寸非主流脑残显示器依然占有不少的份额，同时为大分辨率显示器做适当的适配，一种网页宽度自适应布局应运而生，本文所说的宽度自适应仅仅指pc端的宽度自适应。

理论基点：
1、最小尺寸分辨率1024*768（传统17寸显示器），则可以采用940px、960px、或者鄙人常用的980px作为最小宽度
2、1024768之后稍大的分辨率就是1280768了，则可以采用1200px或者1220px作为稍大的网页宽度
3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签
4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了
5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。
6、宽度自适应为不同宽度显示器写布局元素时常用的css

.wrap {
 display:none;
}
.wrapBig .xxx {
 width:xxpx;
}
.wrapSmall .xxx {
 width:xxpx;
}

实现方式：

1、高级浏览器方式，通过media Queries直接控制，比如控制宽度的div类名叫wrap，则有如下代码，此代码仅作抛砖引玉

/**max width 980px**/
@media screen and (max-width:1200px) {
 .wrap {
 width:980px;
 }
}
/**max1280px screen***/
@media screen and (min-width:1200px) {
 .wrap {
 width:1200px;
 }
}

稍微解释下：第一段当浏览器的可显示区域宽度小于1200px时就将类名为wrap的宽度设置为980px，当浏览器的可显示区域大于1200px时则将类名为wrap的宽度设置为1200px。css3的media queries可以通过拖拽浏览器窗口大小即时显示效果！

这样在17寸显示器上时就不会在浏览器的下方出现滚动条，而在大于17寸的显示器上时可以让网页布局宽度增大到1200px，显示更多的内容。