css3 -- 媒体查询

响应式网页（responsive web design ）

根据用户的窗口大小，调整网页的布局。让大屏幕用户有大的版式设计，不至于浪费显示空间。

国外响应式网站: https://mediaqueri.es/ 
css3 中link 标签中增加了media属性，表示使用这个样式表的条件是什么，叫**媒体查询** 
例如:

 <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index1200.css">
    <link rel="stylesheet" type="text/css" href="css/index980.css" media = "screen and (min-width:980px) and (max-width:1199px)">
   <link rel="stylesheet" type="text/css" href="css/index768.css" media = "screen and (min-width:768px) and (max-width:979px)">
   <link rel="stylesheet" type="text/css" href="css/index767.css" media = "screen and (max-width:767px)">

响应式网站设计demo: https://cyanar.github.io/responsive-web-design/index.html