最近看一个网站,发现显示器不同的分辨率,样式文件调用的也不一样,于是很好奇研究并写了一个, 经测试感觉还不错,感兴趣的你可以来看看哦
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近看一个网站,发现显示器不同的分辨率,样式文件调用的也不一样,今天写了一个例子研究一下,
c1.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.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>
- * {
- margin: 0;
- padding: 0;
- }
- div {
- width: 960px;
- height: 400px;
- margin: 0 auto;
- background: blue;
- color: #ffffff;
- }
- * {
- margin: 0;
- padding: 0;
- }
- div {
- width: 1200px;
- height: 400px;
- margin: 0 auto;
- background: red;
- color: #fff;
- }
来源: