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代码：

CSS3中媒体查询，更换样式表

预览效果：

当浏览器最小屏幕宽度为800px时，显示样式表如下图所示：

CSS3中媒体查询，更换样式表

当浏览器最大屏幕宽度为799px时，显示样式表如下图所示：

CSS3中媒体查询，更换样式表

媒体查询条件：media="screen and...." (可加可不加)
当用户的上网设备是屏幕的时候，上网设备除了有屏幕设备之外，还有残疾人听觉设备、电子阅读器。
<link rel="stylesheet" href="css/1.css" type="text/css" media="screen and (min-width: 800px)" >

CSS3中媒体查询，更换样式表