css根据当前宽度设置css,JS和CSS实现自动根据分辨率设置页面宽度

为了实现自动根据分辨率设置页面宽度，首先我们要先知道一个JavaScript脚本document.documentElement.clientWidth获取页面宽度。

为了说明在IE和FireFox等浏览器中都能实现兼容效果，我说明两种情况支持W3C和不支持W3C，当然从标准的角度讲建议支持W3C。

支持W3C

1、DOCTYPE设置

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

2、IE和FireFox中

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==>

可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

3、在Opera中

document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==>

页面对象宽度(即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==>

页面对象高度(即BODY对象高度加上Margin高)

没有定义W3C的标准

1、IE为：

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

2、FireFox为：

document.documentElement.clientWidth ==>

页面对象宽度(即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==>

页面对象高度(即BODY对象高度加上Margin高)

3、Opera为：

document.documentElement.clientWidth ==>

页面对象宽度(即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==>

页面对象高度(即BODY对象高度加上Margin高)

CSS设置页面宽度

1

2

3

.MainFrame,.cont_navbar,.HeaderBanner

{ width: expression_r((documentElement.clientWidth

< 1003) ?

"1003px" : "auto"

); }

这个兼容浏览器特别麻烦，期待有一天都能统一成标准。