编程 Javascript

JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码

Posted in Javascript onJanuary 23, 2013

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

<!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.onload=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> 
<div id="d"></div> 
</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样式文件实现思路及测试代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 动态酷效果实现总结

Dec 27 Javascript

JavaScript设置IFrame高度自适应(兼容各主流浏览器)

Jun 05 Javascript

JavaScript获取多个数组的交集简单实例

Nov 11 Javascript

js 鼠标移动显示图片的简单实例

Dec 25 Javascript

浅谈javascript中的闭包

May 13 Javascript

Jquery简单实现GridView行高亮的方法

Jun 15 Javascript

BootStrap的JS插件之轮播效果案例详解

May 16 Javascript

PostgreSQL Node.js实现函数计算方法示例

Feb 12 Javascript

纯JS实现五子棋游戏

May 28 Javascript

理解Proxy及使用Proxy实现vue数据双向绑定操作

Jul 18 Javascript

五句话帮你轻松搞定js原型链

Dec 09 Javascript

vue 组件基础知识总结

Jan 26 Vue.js

jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

Jan 23 #Javascript

jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码

Jan 23 #Javascript

jquery简单瀑布流实现原理及ie8下测试代码

Jan 23 #Javascript

jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)

Jan 23 #Javascript

解决jquery submit()提交表单提示：f[s] is not a function

Jan 23 #Javascript

js修改input的type属性及浏览器兼容问题探讨与解决

Jan 23 #Javascript

重构Javascript代码示例(重构前后对比)

Jan 23 #Javascript