页面在不同屏幕分辨率下存在的问题及解决办法

页面在不同屏幕分辨率下存在的问题及解决办法

(未考虑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文件即可。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值