用JS判断不同分辨率调用不同的CSS样式文件

最近看一个网站，发现显示器不同的分辨率，样式文件调用的也不一样，今天写了一个例子研究一下，

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/>
<script type="text/javascript">

window.οnlοad=function(){
   var sc=document.getElementById("sc");
   var d=document.getElementById("d");
   if(screen.width>1024) //获取屏幕的的宽度
   {
      sc.setAttribute("href","css/c2.css");   //设置css引入样式表的路径
      d.innerHTML = "你的电脑屏幕宽度大于1024，我的宽度是 1200px, 背景色现在是红色。";
   }
   else{

   sc.setAttribute("href","css/c1.css");
   d.innerHTML = "你的电脑屏幕宽度小于或是等于1024，我的宽度是 960px, 背景色现在是蓝色。";
   }
   }
</script>
</head>

</body>
</html>

c1.css里面的内容

*{ margin:0; padding:0;}

div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}

c2.css里面的内容

*{ margin:0; padding:0;}

div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}

用JS判断不同分辨率调用不同的CSS样式文件相关推荐

Vue.js 实现v-if和v-else来切换CSS样式
一.要想使用Vue.js实现v-if和v-else来切换CSS样式,有两种实现方式: 比如我们想给一个div设置两个不同的背景颜色(当status为1的时候,我们设置背景为红色,当status状态为2 ...
require.js引入css文件,[DikeJS]RequireJS引入CSS样式文件（五）
在实际开发组件时,我们常常需要关注组件的样式,样式如何定义,以及样式如何引用,我关注此问题时也纠结了一小下,不过还好,RequireJS周边给我们提供了丰富的插件,我们可以直接使用css.js,具体的 ...
wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
一个DIV调用多个CSS样式
1使用以上两个CSS样式表对描述同一个DIV的写法class利用class可以对于同一个标签多重定义样式. 比如用1.2两种样式同时控制一个DIV,可以写成以下格式: <div class=&q ...
js中动态引入css样式文件
function loadStyles(url) {var link = document.createElement("link");link.rel = "style ...
js判断移动终端（手机浏览器）
方法1: <script type= "text/javascript" > var browser = { versio ...
JS设置CSS样式的集中方式
1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element. ...
用JS来动态设置CSS样式
常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 ...
JS修改css样式的8种方式
从其他人的博客上看到的,感觉归纳的很棒,在这里种个草. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...

用JS判断不同分辨率调用不同的CSS样式文件

用JS判断不同分辨率调用不同的CSS样式文件相关推荐

最新文章

热门文章