媒体查询@media

1. @media的兼容性

　　需要 chrome21 ，ie9 ，FireFox3.5 ，Safari 4.0

 

2.写法

　　　　　　　//小于500像素时

            @media screen and (max-width:500px){
                .header{color:#ccc;}
            }
            
            //大于600像素小于1000像素时

            @media screen and (min-width:600px) and (max-width:1000px){
                .header{color:#eee;}
            }

            //大于1100像素时

            @media screen and (min-width:1000px){
                .header{color:#333;}
            }
ip5: min-width:320px; （320*568）
ip6： min-width:375px; （375*667）
6plus: min-width:414px; （414*736）
ipad :  min-width:768px;
小米4s:  (360*565)