根据浏览器视图窗口大小，调用不同样式的css样式表问题

有时候，根据设计人员的需求，根据网站浏览用户在调整浏览器窗口到一定时（这里比如小于宽980px和大于980px），调用不同的样式表。

首先展示一个我所需要的css文件

在HTML的<head></head>插入如下

1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
3 <title>琅琊榜演员表</title>
4 <link href="css/play.css" rel="stylesheet" type="text/css">
5 <script src="script/testCss.js" type="text/javascript"></script>
6 <script type="text/javascript" src="http://static.manmankan.com/dy2013/zongyi/js/jquery-1.7.2.min.js"  charset="utf-8"></script>
7 <link id="loadCss" href="css/play-980.css" rel="stylesheet" type="text/css">
8 </head>

 引入的testCss.js文件内容

var UpData = Math.ceil(Math.random()*100);
function _size()
{
  var sc_wid = document.documentElement.clientWidth;
  var len_link = document.getElementById("loadCss"); 
  if(sc_wid>=1200)
  {
      var newcss="css/play.css?"+UpData;
      $('#loadCss').attr('href',newcss);
  }
  else
  {
      var newcss="css/play-980.css?"+UpData;
      $('#loadCss').attr('href',newcss);
  }
}
_size();
var resize_timer;
window.onresize = function(){
    if(resize_timer) {window.clearTimeout(resize_timer);}
    resize_timer = window.setTimeout(function(){_size();},100);
}

哦，play-1200.css没有用。默认是play.css文件,即窗口大于等于1200px，显示的样式。

其中play-980.css文件内容只需稍作修改覆盖play-1200.css中的一些内容。

posted @ 2016-02-25 09:12  短短几年当校长  Views(657)  Comments(0)    收藏  举报