根据分辨率不同调用不同的css文件

2016-02-19 12:21 40 1 收藏

今天图老师小编要跟大家分享根据分辨率不同调用不同的css文件,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】


dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0  SCRIPT LANGUAGE="javascript" 
!-- 
if (window.navigator.userAgent.indexOf("MSIE")=1) 

var IE1024=""; 
var IE800=""; 
var IE1152=""; 
var IEother="";  
ScreenWidth(IE1024,IE800,IE1152,IEother) 
}else{ 
if (window.navigator.userAgent.indexOf("Firefox")=1) 

file://如果浏览器为Firefox 
var Firefox1024=""; 
var Firefox800=""; 
var Firefox1152=""; 
var Firefoxother=""; 
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) 
}else{ 
file://如果浏览器为其他 
var Other1024=""; 
var Other800=""; 
var Other1152=""; 
var Otherother=""; 
ScreenWidth(Other1024,Other800,Other1152,Otherother) 


function ScreenWidth(CSS1,CSS2,CSS3,CSS4){ 
if ((screen.width == 1024) && (screen.height == 768)){ 
setActiveStyleSheet(CSS1); 
}else{ 
if ((screen.width == 800) && (screen.height == 600)){ 
setActiveStyleSheet(CSS2); 
}else{ 
if ((screen.width == 1152) && (screen.height == 864)){ 
setActiveStyleSheet(CSS3); 
}else{ 
setActiveStyleSheet(CSS4); 
}}} 

function setActiveStyleSheet(title){  
document.getElementsByTagName("link")[0].href="style/"+title;  

file://-- 
/SCRIPT 

解释:

var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. 

var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
引号里面分别填写,用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
引号里面分别填写,用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.
不判断分辨率,只判断浏览器
应E.Qiang提议,编如下代码。实现根据浏览器类型自动调用不同CSS。
代码:
SCRIPT LANGUAGE="javascript" 
!-- 
if (window.navigator.userAgent.indexOf("MSIE")=1) 

file://如果浏览器为IE 
setActiveStyleSheet("default.css"); 
}else{ 
if (window.navigator.userAgent.indexOf("Firefox")=1) 

file://如果浏览器为Firefox 
setActiveStyleSheet("default2.css"); 
}else{ 
file://如果浏览器为其他 
setActiveStyleSheet("newsky.css"); 

}  
function setActiveStyleSheet(title){  
document.getElementsByTagName("link")[0].href="style/"+title;  

file://-- 
/SCRIPT 
解释:
如果浏览器为IE,则调用default.css
如果浏览器为Firefox,则调用default2.css
如果浏览器为其他,则调用newsky.css
用法:放在head/head中即可。

来源:http://www.tulaoshi.com/n/20160219/1600685.html

延伸阅读
标签: Web开发
在中曾提到要给自己的制作多个样式,然后用户每次访问时随机载入样式,让微博在视觉上保持新鲜感。虽然思路与实现都比较简单,但还是想记录下来,与大家分享。 网页加载样式表default.css,会展现默认风格。同时为实现多种风格,制作了skin1.css,skin2.css,skin3.css三种定制样式。如果在加载default.css后,再加载其中某一样式表,则...
标签: Web开发
    CSS的写法可以用以下的几种方法实现:     (1)使用Embed(嵌入样式单)排版样式:     即将CSS代码直接插入每个页面的HTML的head区,就象上一节看到的。使用style.../style标签。例如: style type="text/css" !-- h2 { font-family: "宋体"; font-size: 12pt; font-style: italic...
    CSS的写法可以用以下的几种方法实现:     (1)使用Embed(嵌入样式单)排版样式:     即将CSS代码直接插入每个页面的HTML的<head区,就象上一节看到的。使用<style...</style标签。例如: <style type="text/css" <!-- h2 { font-family: "宋体"; font-size: 12...
标签: Web开发
有时候我们的博客上经常会提供一些资源供别人下载,但是像是PJBlog中,所有的下载链接都只用一个图标来表示。有了新CSS3的属性选择符这项新技术后我们就可以根据下载文件的不同类型显示不同的图标了。     这里我们要用到的是 E [att$=value]{…}      它的意思用以选取所有以value结尾的元素E。那...
标签: Web开发
!-- +++++++++++++++++检测屏幕分辨率++++++++++++++++++++++++++  --

经验教程

935

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部