查看: 8384|回复: 1
打印 上一主题 下一主题

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

[复制链接]
跳转到指定楼层
1#
发表于 2007-9-21 08:33:43 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
台州网址导航
<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>中即可。
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享分享 分享淘帖
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
2#
 楼主| 发表于 2007-9-21 08:46:15 | 只看该作者
台州网址导航
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>DIV布局测试</TITLE>
<style>
div
{
height:150px;
}
div.left
{
width:20%;
float:left;
clear:right;
background-color:#eeeeee;
}

div.center
{
width:50%;
float:left;
clear:right;
background-color:#CCCCCC;
}

div.right
{
width:30%;
float:left;
clear:right;
background-color:#808080;
}
div.both
{
width:100%;
clear:both;
background-color:#696969;
}

</style>
</HEAD>

<BODY>
<div class="left">左侧</div>
<div class="center">中侧</div>
<div class="right">右侧</div>

<div class="both">全行</div>

<div class="left">左侧</div>
<div class="center">中侧</div>
<div class="right">右侧</div>
</BODY>
</HTML>
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

网站推广
关于我们
  • 台州朗动科技(Tzweb.com)拥有多年开发网站平台系统门户手机客户端等业务的成功经验。主要从事:政企网站,系统平台,微信公众号,各类小程序,手机APP客户端,浙里办微应用,浙政钉微应用、主机域名、虚拟空间、后期维护等服务,满足不同企业公司的需求,是台州地区领先的网络技术服务商!

Hi,扫描关注我

Copyright © 2005-2026 站长论坛 All rights reserved

Powered by 站长论坛 with TZWEB Update Techonolgy Support

快速回复 返回顶部 返回列表