芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
1

自适应网页宽度的浏览器兼容方法

作者 芒果/分类 代码/发布于 2009-04-09 21:25

由于显示器分辨率不同,以及各种浏览器对 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 以及大部分浏览器,达到自适应分辨率的效果。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/adapting-page-width-browser-compatible-method/" title="自适应网页宽度的浏览器兼容方法" rel="bookmark">自适应网页宽度的浏览器兼容方法 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 1 条群众意见

  1. tao528 /2011-01-20 15:16

    LZ真给力,网页的问题终于解决了~ 回应

    #1

下面我简单说几句