媒体查询，响应式布局

method1：
　　根据不同屏幕调用不同样式表

<link rel="stylesheet" href="css1.css" media="screen and (min-width:500px)">
<link rel="stylesheet" href="css2.css" media="screen and (min-width:761px)">
<link rel="stylesheet" href="css3.css" media="screen and (min-width:992px)"> 

method2：

在style中直接根据不同屏幕设置不同样式

<style>
	@media screen and (min-width: 500px){
		...
	}
	@media screen and (min-width: 761px){
		...
	}
	@media screen and (min-width: 992px){
		...
	}
</style>