CSS3媒体查询

媒体类型

all 所有媒体（默认值）

screen 彩色屏幕

print 打印预览

projection手持设备 tv 电视 braille盲文触觉设备 embossed盲文打印机 speech“听觉”类似的媒体设备 tty不适用像素的设备

媒体属性

width （浏览器|视口宽度 可加max min前缀）

height （可加max min前缀）

device-width （设备的独立像素 pc端=分辨率 移动端=设备参数 可加max min前缀）

-webkit-device-pixel-ratio（设备像素比 PC=1 iPhone678=2 iPhoneX=3 可加max min前缀，需要加webkit前缀）

orientation :  portrait 竖屏 landscape 横屏   视口宽度大于高度=横屏

操作符，关键字 (only，and，逗号，not)

 only 防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式 , 建议在每次抒写media query的时候带上only

                 @media only screen and (min-width:800px ){ 规则； 规则 }

                 @media screen and (min-width:800px ){ 规则； 规则 }

                 在老款的浏览器下 @media only ---> 因为没有only这种设备 规则被忽略

                 @media screen ---> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询

and( )  连接媒体属性 、连接媒体类型  对于所有的连接选项都要匹配成功才能应用规则

                @media only screen and （min-width：600px）{ 。。。}

  ， 逗号代表or ， 对于所有的连接选项只要匹配成功一个就能应用规则

                @media only screen ，（min-width：600px）{  }

not 取反

                @media not print and （min-width：600px）{ }