定义和使用
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
有两种方式：
一种是直接在link中判断设备的尺寸
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min- 400px)"> 意思为当屏幕的宽度大于等于400px的时候，应用styleA.css
另一种方式，即是直接写在 style 标签里
@media screen and (max- 600px) { } /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
@media screen and (min- 960px) and (max-1200px) { } /*当屏幕尺寸大于960px且小于1200px时，应用下面的CSS样式*/
注意：
如果你把@media (min- 768px)写在了下面那么很悲剧，
@media (min- 1200){ //>=1200的设备 }
@media (min- 992px){ //>=992的设备 }
@media (min- 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max- 1199){ //<=1199的设备 }
@media (max- 991px){ //<=991的设备 }
@media (max- 767px){ //<=768的设备 }
最后，拜拜~~