在前端页面中尤其中需要进行响应式设置的页面里，@media非常有用，它可以根据不同的媒体类型和条件加载不同的样式，根据不同尺寸的屏幕设置不同的样式，当浏览器窗口发生改变的时候，它会依据条件进行重新渲染。
需要特别注意的是，在样式的使用上要特别注意插入@media的具体位置，一般会插入在需要修改代码的后面，以覆盖之前的代码。要理解：媒体查询就是当设置的条件满足时，在当前位置插入相应的代码。
简单举例：
<style>
.wrapper{
border:1px solid red;
}
.child{
width:80px;
height:80px;
background:#ddd;
}
@media screen and (max-width:400px){
.child{
float:right;
width:100px;
height:100px;
}
}
</style>
以上@media的意思是：只有屏幕宽度小于等于400px的时候，.child才向右浮动，同时，宽高都改为100px，这个宽高的修改会覆盖之前的样式。如果屏幕宽度大于400px的话，就按照上面的代码来。
屏幕宽度大于400px这段代码的效果：
屏幕宽度大于400px
屏幕宽度小于400px:
小于400px
注意当屏幕宽度小于400px时，开发者工具里的显示内容:
注意看被划画的部分
注意看被画掉的代码就是当屏幕宽度小于400px时被覆盖掉的代码
除了对于屏幕宽高进行查询以外，还可以对颜色、是否横屏等进行查询；
<link rel="stylesheet" media="(max-width:600px)" href="this.css">
这是link标签中的@media方法，意思就是说，当宽度小于600px时，就加载this.css这个样式表。注意：不管宽度是否小于600px，浏览器都会下载这个样式表。
除此以外@media还有and , not only 等逻辑符号，可以组合出更复杂的媒体查询方法，具体可以参见mdn。以后遇到再举例。
