CSS 屏幕大小自适应的实现示例

/ 这是匹配横屏的状态，横屏时的css代码 /

@media all and (orientation :landscape){}

/ 这是匹配竖屏的状态，竖屏时的css代码 /

@media all and (orientation :portrait){}

@media X and (min-width:200px){}
/X为媒体类型--->比如print/screen/TV等等/

/ 宽度大于600px小于960之间时，隐藏footer结构 /

@media all and (min-height:640px) and (max-height:960px){
   　　　footer{display:none;}
}

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

@media screen and (min-width: 320px) and (max-width: 1156px){

              .site-bg-dl {
              position: fixed;
              height: 100%;
              width: 100%;
              z-index: 0;
              background-image: url(bjxzfwzx/images/bj1.png);
              background-size: cover;
              background-repeat: no-repeat;
              background-attachment: fixed;
              background-size:100% 100%;
              -moz-background-size:100% 100%;
            }
}

/ 大屏幕 大于等于1200px/
@media (min-width: 1200px) { ... }

/默认/
@media (min-width: 980px){...}

/ 平板电脑和小屏电脑之间的分辨率 /
@media (min-width: 768px) and (max-width: 979px) { ... }

/ 横向放置的手机和竖向放置的平板之间的分辨率 /
@media (max-width: 767px) { ... }

/ 横向放置的手机及分辨率更小的设备 /
@media (max-width: 480px) { ... }