页面在不同屏幕分辨率下存在的问题及解决办法
来源:互联网 发布:济南广电网络套餐 编辑:程序博客网 时间:2024/06/04 19:16
页面在不同屏幕分辨率下存在的问题及解决办法
(未考虑800*600或更低分辨率的情况)
一 问题
在不同分辨率下,页面布局存在不同程度的差异,特别是页面上的表单控件,其宽度默认是固定值“width:150px”,当分辨率较高时,表格中的空白显得过多,页面布局显得很不协调,在宽屏显示器上尤为明显。
二 解决办法
方法1. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件。样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可。
在包含的头文件headr.inc中加入js代码:
if(screen.width > 1024){
document.write('<link rel="stylesheet" type="text/css" href="${path}/nrmus/etc/css/forms_'+ screen.width +'.css">');
}
forms_1280.css文件内容:
/* 分辨率宽度为1280的时候,文本框和下拉框的宽度属性(width)单独定义
* 参考计算方法为:(分辨率宽度-174)/4 * 0.7
* 左侧菜单栏宽度为174px;右侧页面表格是4列;控件宽度为单元格的70%
* (1280-174)/4*0.7 = 193
*/
input.text
{
background:#FFFFFF;
border:1px solid #B5B8C8;
padding:3px 3px;
height:22px;
line-height:18px;
vertical-align:middle;
padding-bottom:0pt;
padding-top:2px;
width: 193px;
color: #333;
}
select.select{
width: 193px;
}
优点:实现很简单,代码量少;并且可针对不同分辨率做更细粒度的页面控制。
缺点:无明显缺点。
方法2 将整个页面的宽度设置为固定值,并使其居中显示。
优点:可以很大程度的消除不同分辨率下的显示差异。
缺点:分辨率宽度大于这个固定值的时候,页面两边会出现空白。
方法3 用js判断分辨率,修改body的zoom属性(IE特性),即可实现对整个页面进行缩放,类似IE8或其它浏览器提供的缩放功能。
优点:实现简单,页面能进行缩放。
缺点:缩放是宽度和高度的等比缩放,高分辨率下字体、图片看起来会变小,问题解决的不彻底。
三 总结
推荐方法1。页面布局的变化和分辨率的宽度有密切关系,和高度关系不大;常用的分辨率宽度也就几种,做几个简单的css文件即可。
- 页面在不同屏幕分辨率下存在的问题及解决办法
- 页面在不同屏幕分辨率下存在的问题及解决办法
- 页面在不同屏幕分辨率下存在的问题及解决办法
- XMLHTTPREQUEST IE下存在跨域问题
- 绝对定位在IE6下存在left和bottom的定位错误问题
- /var/spool/clientmqueue/目录下存在大量文件的原因及解决方法
- MySQL部分表复制配置下存在的运维风险、原因及一种方案
- linux cp进行目录拷贝,目的路径下存在同名目录情况下出现的问题
- ExtJs在IE下存在的一个bug
- 音乐在不同HTML页面的连续播放问题
- Tab在不同页面的隐藏与不隐藏问题。
- 在 RH9 下存取 Windows 下的共享文件夹
- Windows系统下存在的4条最基本路由
- CentOS下存在大量的TCP TIME_WAIT解决方法
- shell判定文件夹下存在某种类型的文件
- 记录一个ByteBuffer在多线程下存取的简单应用
- 解决toolbar在不同页面下显示的menu不同的问题
- JS获取网页高度及屏幕分辨率高度让DIV层始终在页面最底部
- 框架对Spring的扩展
- 学习小结(IPC、PCI)
- 当RTX账号是中文账号时如何做数据同步?
- [hoj 1225]Supermarket代码阅读记录
- 简单的流驱动
- 页面在不同屏幕分辨率下存在的问题及解决办法
- android跨进程事件注入(程序模拟用户输入)
- 黑马程序员_高新技术1(高级for,静态导入,可变参数,自动装箱拆箱,枚举)
- Erlang原子(atom)的内部实现及应用
- 关于SQL server 2005 数据库中的指定单表进行定时备份!
- C++编程之旅
- Drupal主题介绍
- Ubuntu软件中心更新出错
- IDA PRO使用