浏览器页面的宽度小于1200px的时候，读取另外一个css，窗口变化加载不同css

d.css
body{background-color:#000;}
1200.css
body{background-color:red;}

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" id="css">

<script language="javascript">
$(window).resize(function(){
	//监控窗口大小
	var $win  =$(window);
	if(($win.width() < 1200)){
		//浏览器页面的宽度小于1200px的时候  读取另外一个css
		document.getElementById('css').href = '1200.css';
	}
	else{
		document.getElementById('css').href = 'd.css';
	}
});
$(window).resize();
</script>

<body>

</body>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" id="css">

<script language="javascript">
function dis()
{
	var $win  =$(window);
	if(($win.width() < 1200)){
		//浏览器页面的宽度小于1200px的时候  读取另外一个css
		document.getElementById('css').href = '1200.css';
	}
	else{
		document.getElementById('css').href = 'd.css';
	}
}
dis();
</script>

<body>

</body>

$(window)和$(document)获取到的对象不同。
1、Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算.
2、Document 对象是 Window 对象的一部分,每个载入浏览器的 HTML 文档都会成为 Document 对象.

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。

1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

jquery $(window).height()和$(window).width()指的是什么
		 应该浏览器可视窗口的高度和宽度。
		 浏览器有效高度和宽度
追问：
那么请问$(window).scrollTop()和$(window).scrollLeft()是指的什么呢，。
追答：
滚动条的上边界和左边界
追问：
能说的具体一点吗。。。。
追答：
浏览器不是有滚动条吗？就是滚动的上边界和左边界对于浏览器可视区域的偏移量

jquery中的对象
$(document) 是当前文档，就是你看到的整个网页
$(window) 如果没有框架则就是你浏览的当前浏览器的窗口

var $win  =$(window);
if($win.width() > 1024) {
    // 加载css1
} else {
    // 加载css2
}

$(document).ready(function(){
$(window).resize();
});
$(window).resize(function(){
    //这里写内容

});