媒体查询是css3新的语法： @media only screen and (min-width: ) { 属性：属性值； }
@media only screen and (min-width: 100px) and (max-width: 640px) { 属性：属性值； } screen 用于电脑屏幕，平板电脑，智能手机等。 only 唯一（忽略） and 并且（不常用） min-width 屏幕最小宽度值 max-width 屏幕最大宽度值
通过媒体查询的语法可以针对不同的屏幕尺寸设置不同的样式， 特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
就是根据设备屏幕的宽度，引入不同的css文件 语法： <link rel="stylesheet" type="text/css" href="index1.css" media="screen and(min-width:320px)"/> <link rel="stylesheet" type="text/css" href="index2.css" media="screen and(min-width:640px)"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @media screen and (min-width:300px) { body{ background: blue; } } @media screen and (min-width:600px) { body{ background: yellow; } } /* body背景为红色 只在1000px以上有效果 */ @media screen and (min-width:1000px) { body{ background: pink; } } /* body背景为红色 只在1500px以上有效果 */ @media screen and (min-width:1500px) { body{ background: red; } } </style> </head> <body> </body> </html>