举例：@media only screen and
only: 限定某种设备；
screen： 是媒体类型中的一种，其他还有print/handheld/tv/tty等；
and： 关键字，其他关键字还包括not(排除某种设备)；
1. 常用场景：
a.
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width:600px) and (max-width:800px)">
---表示style.css只应用于屏幕的宽度是在大于600px小于800px的情况下；
b.
@media screen and (max-width:600px){
.class{
background: #ccc;
}
}
---表示屏幕宽度小于600px时，#ccc背景颜色生效；
2. device-aspect-ratio
当需求是要对某种长宽比的屏幕做特殊样式的情况下使用
@media only screen and (device-aspect-ratio:4/3)
3. only ： 一般来说，用only是看不出效果的，这样采用效果：
@media all and (min-width:xxx) and (max-width:xxx){
/*这段查询的all是针对所有设备(有些设备不一定是屏幕，也许是打字机，盲人阅读器)*/
}
@media only screen and (min-width:xxx) and (max-width:xxx){
/*上面针对了所有设备，这段是只(only)针对彩色屏幕设备*/
}
