用JS调用不同的CSS样式在不同分辨率下怎么搞哦，试了很多JS代码都不行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JS调用不同的CSS样式在不同分辨率下怎么搞哦，试了很多JS代码都不行相关的知识，希望对你有一定的参考价值。
因为版面需要，所以我在一个DIV中用了margin,并且数值是 -230PX 0 0 230px. 所以在不同分辨率下面，这个DIV会改变，现在我针对各个分辨率都写出来正确的CSS样式，就是要写一段JS代码检测屏幕的分辨率，然后调用相应的CSS，我的CSS在根目录下，请知道的人说说，给最高分，我弄好了，继续追加，反正我分多。先谢谢大家了。
fivetomic 兄你说的这个我都试过了，没有成功，当然最好是判断浏览器的，比如你的第二个我在网上看到资料 的，但是我试了没有成功，我的style.css文件是在根目录下的，最好请写一个示例的html文件出来，怎么调用的，变量修改的地方等。。。谢谢啦。。在线等着回答。。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<link href="" rel="stylesheet" type="text/css" />
<SCRIPT LANGUAGE="javascript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
var IE1024="1.css";
var IE800="2.css";
var IE1152="1.css";
var IEother="2.css";
ScreenWidth(IE1024,IE800,IE1152,IEother)
else
if (window.navigator.userAgent.indexOf("Firefox")>=1)
//如果浏览器为Firefox
var Firefox1024="2.css";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
else
//如果浏览器为其他
var Other1024="1.css";
var Other800="2.css";
var Other1152="1.css";
var Otherother="2.css";
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;
//-->
</SCRIPT>
</head>
<body>
<div id="box"></div>
</body>
</html>
这个够完整吧，当然里面写的是我测试的。你复制保存一个html先放电脑桌面上，然后在桌面上建立一个 style的文件夹，里面创建一个1.css和2.css
分别这样写本回答被提问者采纳 参考技术C 1.css里面写
#box width:400px; height:100px; background:#000000;
2.css里面写
#box width:400px; height:100px; background:#ff0000;
然后你打开你先前的那个html就可以看到效果了。
我是上面的FIVETOMIC，不知道为什么一次回答不了，还得分两次，满意的话采纳上面FIVETOMIC的答案，谢谢了：） 参考技术D -230PX 0px 0px 230px
PC端页面适应不同的分辨率的方法
参考技术A 这个方法的思路是，分别针对800、1280、1440、1600、1920等分辨率，创建不同的css文件。然后在各种分辨率下，写css样式表。
我们只需要在我们的HTML页面的<head></head>标签中，使用js，根据不同的电脑分辨率，加载不同的css样式表。注意这里的js一定要写在<head></head>标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来。
媒体查询是CSS3的新特性，绝大多数浏览器都可兼容这一特性。这个方法的思路也是根据不同的分辨率，应用不同的css样式。
这个思路和和方法一差不多，或者说方法一的思路和这个思路差不多，毕竟这也是官方的做法。我们有两种使用媒体查询的方式。
1.根据不同的分辨率，引入不同的css样式表
这个方法和方法一相同，也是通过判断电脑的分辨率，来引入相对应的css样式表。
2.在同一个css样式表中，根据不同的分辨率，写不同的css样式
这个方法只有一个css演示表，在这个样式表里面，根据不同的分辨率，写不同的css样式。
以上是关于用JS调用不同的CSS样式在不同分辨率下怎么搞哦，试了很多JS代码都不行的主要内容，如果未能解决你的问题，请参考以下文章