CSS @media

举例：@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)针对彩色屏幕设备*/

}