027媒体查询

css3媒体查询是响应式方案核心

操作符(only,and,(, or),not)
-only:防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式。
@media only screen and (min-width:800px ){
　　　规则;
　　　规则
}
@media screen and (min-width: 800px ){
　　　规则;
}
在老款的浏览器下
@media only—>因为没有only这种设备规则被忽略
@media screen —>因为有screen这种设备而且老浏览器会忽略带媒体属性的查询
建议在每次抒写media query的时 候带上only

and:连接媒体属性、连接媒体类型
对于所有的连接选项都要匹配成功才能应用规则
and:代表与的意思，一般 用and来连接媒体类型个媒体属性

or(,) :和and相似
对于所有的连接选项只要匹配成功一个就能应用规则

not:取反

媒体类型
　　　all　　　　　所有媒体(默认值)
　　　screen　　　彩色屏幕
　　　print　　　　打印预览
　　　projection　　手持设备
　　　tv电视
　　　braille　　　　盲文触觉设备
　　　embossed　　盲文打印机
　　　speech　　　“听觉”类似的媒体设备
　　　tty　　　　　　不适用像素的设备
　　　
媒体属性
　　　width　　　　　　　(可加max min前缀)
　　　height　　　　　　(可加max min前缀)
　　　device -width　　　(可加max min前缀)
　　　device-pixel-ratio　 (可加max min前缀，需要加webkit前缀)
　　　orientation 　　　portrait竖屏　　landscape横屏

<link rel="stylesheet" type="text/css" href=" index.css" media="screen"/>

width:浏览器窗口的尺寸(min max)
　　min-width: 800px　　　>= 800px
　　max-width: 800px　　　<=800px
device -width:设备独立像素(min max)
　　pc端:　　分辨率
　　移动端:　　具体看机器的参数
rice-pixel-ratio
　　pc端: 　　1
　　移动端　　:具体看机器的参剡

@media screen and (min-device-width:414px) {
　　/规则/
　　#wrap{
　　　　　border: 10px solid;
　　}
}