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设置页面宽度

.MainFrame,.cont_navbar,.HeaderBanner

{ width: expression_r((documentElement.clientWidth

< 1003) ?

"1003px" : "auto"

); }

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

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

悬浮球（多机型悬浮窗权限设置，状态栏适配，可自动或手动设置大小，点击跳转WebView，拖拽处理）
悬浮球:多机型悬浮窗权限设置,状态栏适配,可自动或手动设置大小,点击跳转WebView,拖拽处理, 应用内和应用外都可以显示(可设置取消)可做SDK 和依赖类,横竖屏切换处理项目地址: GitHub ...
php 压缩js css文件,PHP实现动态压缩js与css文件的方法
本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参考,具体如下: 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用只需要 ...
yii怎么引入css文件,Yii框架怎样引用JS和CSS文件
Yii框架怎样引用JS和CSS文件发布时间:2021-01-06 09:58:23 来源:亿速云阅读:118 作者:小新这篇文章给大家分享的是有关Yii框架怎样引用JS和CSS文件的内容.小编觉 ...
html根据PC手机设置不同背景图,Html-根据不同的分辨率设置不同的背景图片
@media only screen and (min-width: 1024px) //当分辨率width >= 1024px 时使用1.jpg作为背景图片 { .bg{ backgr ...
php 合并 js css,PHP实现合并多个JS和CSS文件示例
//输出JS header ("Content-type:application/x-javascript; Charset: utf-8"); if(isset($_GET)) ...
华硕主板bios通电自启设置_求各种主板通电自动开启的设置?
开机按Del进BIOS设置的"PowerManagementSetup"中,有一个选项 "PwronAfterPW-Fail".大多数主板在BIOS中有一个选项 ...
matlab 设置当前axes,MATLAB关于axes自动模式的设置
不是把模式都设为自动模式后就万事大吉了,还需设置轴属性,使之与原来同样大小 set(handles.SpeedAxs,'TickDirMode','manual'); set(handles.Spee ...
浏览器跳不同不同页面 php,利用js根据不同浏览器自动跳转不同页面
//本源码由www.qsyz.net提供站长微博www.weibo.com/ohtc var ua = navigator.userAgent.toLowerCase(),s,app = {},ur ...
QiYuAdmin-metronic首页的js和css介绍(SpringBoot项目实战)
简介这篇文章主要是对metronic首页的js和css进行简单的介绍,以及针对QiYuAdmin项目梳理出一些公用的js和css,什么是共用的js和css?共用的js和css是很多页面都会用到相同的 ...

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

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

最新文章

热门文章