布局扩展-响应式布局核心

媒体查询是响应式方案核心
		
		媒体类型
		  all 所有媒体（默认值）
		  screen 彩色屏幕
		  print 打印机
		  
		  projection 手持设备
		  tv 电视
		  braille 盲文触觉设备
		  embossed 盲文打印机
		  speech "听觉"类似的媒体设备
		  tty 不适用像素的设备
		  
		媒体属性
		  width (可加max（<=） min（>=）前缀)   浏览器窗口的尺寸
		  height (可加max min 前缀)
		  device-width (可加max min 前缀) 设备独立像素（pc端理解为分辨率 ；移动端看设备具体参数）
		
		  -webkit-device-pixel-radio （必须加webkit前缀 可加max min ）设备像素比  （pc端：1 ；移动端看设备具体参数）
		  orientation portrait竖屏 landscape横屏
		
		
		操作符，关键字（only,and ,(, or),not）
		  only（解决浏览器兼容性问题）
		    防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式
			@media only screen and (min-width:800px){
				规则；
			}
			@media screen and (min-width:800px){
				
			}
			
			在老旧的浏览器下
			@media only -->因为没有only这种设备直接被忽略
			@meida screen -->因为有screen这种设备而且老旧的浏览器会忽略带媒体属性的查询
			建议在书写媒体查询的时候带上only
			
		  and 
		    连接媒体属性，连接媒体类型
			对于所有的连接选项都要匹配到才可以应用规则
		  or 
		    @media screen and (min-width:800px) ,(-webkit-device-pixel-radio :2){
				/*最小宽度为800px的彩色屏幕和 像素比为2的所有设备*/
			}
		  not
		    @media not screen and (min-width:800px) ,(-webkit-device-pixel-radio :2){
		    	/*不是最小宽度为800px的彩色屏幕  和 像素比为2的所有设备 就行*/
		    }