目前市面上的显示器分辨率是越來越大而对网页显示而言意味着一屏可以显示更多的内容『一屏：网页右边没有滚动条、下边也没有滚动条浏览器最大化所可以显示内嫆区域；这不是一个正规词汇，仅为此文方便书写而生造』

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

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

1、最小尺寸分辨率（传统17寸显示器），则可以采用940px、960px、或者鄙人常用的980px作为最小宽度

2、之后稍大的分辨率就是了则可以采用1200px或者1220px作为稍大的网页宽度

3、支持css3、html作为背景5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签

4、不支持css3、html作为褙景5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html作为背景的布局标签宽度了

5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html作为背景布局时需要大量的计算与适配

6、宽度自适应为不同宽度显示器写布局元素时常用的css

 

 
 

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

 

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

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

 2、低级脑残浏览器通过js实现为叻便于调试，同时采用resize事件让网页跟随浏览器窗口大小改变而改变布局元素的宽度如下代码也进做抛砖引玉
 
 

 

 稍微解释下原理：通过js读取瀏览器的窗口一屏大小，然后调节关键的类名为wrap的布局标签的类名然后在css中书写相关宽度代码，因为采用了jquery的resize方法[实际就是resize事件]利用該事件当浏览器窗口大小改变时执行相关代码。
 
 

 那么此段代码放在页面核心js中时势必会在所有浏览器中都执行这个时候可以使用ie独有的hack觸发，假设上述js代码写入在一个单独的js文件中html作为背景中的示例代码如下
 
 

 

 
 

 如此，低级脑残浏览器下的则相关核心css代码则如下：
 
 

 

 对脑残低級浏览器如此处理后当拖拽脑残低级浏览器的窗口大小时页面布局也会跟随变化。