<link rel="stylesheet" href="css/1.css" media="(min- width:600px)">
<link rel="stylesheet" href="css/2.css" media="(max-
width:599px)">
没写一句js，让页面能够根据宽度来更换样式表。这就是CSS3媒体查询！
媒体查询的兼容性：IE9开始兼容的！javascript检测宽
度更换样式表，是IE6也兼容。
媒体查询是CSS3中新特性。还可以用在内嵌式 , 代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/1.css" type="text/css" media="(min-width:800px)"> <link rel="stylesheet" href="css/2.css" type="text/css" media="(max-width:799px) and (min-width:600px)"> <link rel="stylesheet" href="css/3.css" type="text/css" media="(max-width:599px)"> <style type="text/css"> @media(min-width:800px){ div{ width:200px; height:200px; background:red; } } @media(max-width:799px){ div{ width:100px; height:600px; background:blue; } } </style> </head> <body> <div></div> </body> </html>
css代码：
预览效果：
当浏览器最小屏幕宽度为800px时，显示样式表如下图所示：
当浏览器最大屏幕宽度为799px时，显示样式表如下图所示：
媒体查询条件：media="screen and...." (可加可不加)
当用户的上网设备是屏幕的时候，上网设备除了有屏幕设备之外，还有残疾人听觉设备、电子阅读器。
<link rel="stylesheet" href="css/1.css" type="text/css" media="screen and (min-width: 800px)" >
