• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> css >> css适应浏览器大小 -创新互联

css适应浏览器大小 -创新互联

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2010-01-10
• 　　在以前的代码中, 对贴子中超过746像素宽的图像自动调整为746大小。现在用宽屏显示器的越来越多，需要将ubbshow.js中的图像重绘代码作些修改，使图像大小随屏幕大小及不同的css风格自动调整。
  
  　　该代码运行的前提是先为headerbg样式指定个ID名,也就是把header.asp中的class='headerbg'之前加上一句id='headerbg', 这样后面的代码就能访问这个headerbg对象了.
  
  　　实现该功能需考虑两个问题, 一个是获取当前屏幕大小,另一个问题是确认当前采用的什么风格文件, 因为即使屏幕为1024px宽,而风格采用的是极速, 图片也不能放大到1024宽,那样就会撑破极速的窗口。
  
  　　实现的思路如下，为header.asp文件中的headerbg样式指定个ID，然后在js中读取该ID样式中的width值，如width值为具体数字，则直接采用该宽度，如为100%，则取当前屏幕宽度。需要注意的是，读取的值是字符串，使用前应用parseInt函数将其变为整数。
  
  需要用到的有关函数或方法:
  parseInt(); 将括号中的内容转换为整数型.
  getElementById() 获取ID号对象
  .currentStyle.width 对象属性值
  getElementById("对象ID名").currentStyle.width即为对象的当前样式中的宽度值.
  
  关于屏幕控制的有关属性:
  网页可见区域宽：document.body.clientWidth
  网页可见区域高：document.body.clientHeight
  网页可见区域宽：document.body.offsetWidth (包括边线的宽)
  网页可见区域高：document.body.offsetHeight (包括边线的宽)
  网页正文全文宽：document.body.scrollWidth
  网页正文全文高：document.body.scrollHeight
  网页被卷去的高：document.body.scrollTop
  网页被卷去的左：document.body.scrollLeft
  网页正文部分上：window.screenTop
  网页正文部分左：window.screenLeft
  屏幕分辨率的高：window.screen.height
  屏幕分辨率的宽：window.screen.width
  屏幕可用工作区高度：window.screen.availHeight
  屏幕可用工作区宽度：window.screen.availWidth
• 友情链接自动换行css兼容性完美解决方案 :上一篇
  CSS样式表与具体设备 :下一篇