为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

时间:2023-03-08 18:20:32
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

为不同分辨率单独做样式文件,在页面头部用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;

}

优点:实现很简单,代码量少;并且可针对不同分辨率做更细粒度的页面控制。

缺点:无明显缺点。

http://blog.csdn.net/qinglu/article/details/9252931原文

http://www.genban.org/news/dedecms-8101.html