css媒体查询 @media使用方式

使用公式：
@media 媒体类型 and （媒体特性）{css样式}

媒体类型
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示，比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视

媒体特性
1、最大宽度max-width / 宽度 width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。也可以使用width宽度

 @media screen and (max-width: 1300px) {
          .nameDiv {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

2、最小宽度min-width
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

 @media screen and (min-width: 1300px) {
          .nameDiv {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

3、多个媒体特性使用
在一个区间中生效

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4、设备屏幕的输出宽度Device Width
在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

5、not关键词
使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作

@media not print and (max-width: 1200px){
 body {background-color:#f5f5f5;}
}

6、only关键词
only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。处理浏览器兼容问题，让旧浏览器读取失效。