芒果小站

由于显示器分辨率不同，以及各种浏览器对 Web 标准的支持不尽相同，给网页设计人员带来了很大的麻烦。

普通分辨率 800*600 已经基本淘汰，主流的分辨率为 1024*768，1280*800，1280*1024，1440*900 等几种。现在的网页标准宽度一般采用 950/960 像素宽度。

虽然固定网页宽度被大量采用，但网页自适应各种分辨率在设计中也有一定需求。下面芒果将介绍一种自适应宽度的方法。

自适应宽度的 CSS 写法：

#div {background: #000; margin: 0 auto; width: 90%;}

这个不算难事。由于 CSS 本身支持最小宽度和最大宽度的定义，分别为 min-width 和 max-width 属性：

#div {background: #000; margin: 0 auto; width: 90%; min-width: 800px; max-width: 960px;}

即指定了 800~960 像素的宽度范围，浏览网页时最小限制为 800px，再小就出现横向滚动条，最大限制为不超过 960px。可是 IE 6 并不支持这种属性，网页也就无法根据分辨率自动调整宽度。那就需要判断窗口大小：

#div {background: #000; margin: 0 auto; width: 90%; min-width: 800px; max-width: 960px; width: expression (document.body.clientWidth <= 800? "800px": (document.body.clientWidth >= 960? "960px": "auto"));}

这样兼容了 IE 6 以及大部分浏览器，达到自适应分辨率的效果。