媒体查询

媒体查询方式

 <style>
    /* screen : 屏幕 */
     @media  screen and (min-width: 1200px){
            /* min-width:1200px */
            /* 当屏幕宽度超过1200px时，该处的样式生效 */
            .box{
                background: black;
            } 
        }
   @media all and (max-width:800px) and (min-width: 600px){
            /* // 当屏幕小于800px时背景是蓝色 ,并且宽度大于600像素*/
            .box{
                background: blue;
            } 
        }
   orientation:方向
   portrait:竖屏
   landscape:横屏
   @media (orientation:portrait){
     body{
             background:#fff
     }
   }
    @media (orientation:landscape){
     body{
             background:#000
     }
   }
 </style>