关于css3 媒体查询@media

做完页面后，用手机打开看后发现首页背景图变小了，留有空白，就是试着使用了媒体查询@media

宽度小于768px的使用手机版背景图，宽度大于768px的使用PC版背景图。

/*背景图片*/    

@media screen and (max- 768px) {    
    .body_img {
        position: fixed;
    right:0px;
    top:0px;
    width: 100%;
    height: 100%;
    z-index:-9999;
       background: url(body_bg_sj.jpg) center top no-repeat;
    }
}
@media screen and (min- 768px) {    
    .body_img{
    position: fixed;
    right:0px;
    top:0px;
    width: 100%;
    height: 100%;
    z-index:-9999;
    background: url(body_bg.jpg) center right no-repeat;
    }
}

可是，再用手机预览，发现并没有什么效果，直到添加了一行如下代码：

 <meta name="viewport" content="width=device-width" /> 

再用手机预览，效果和自己想的就一样了，也许是因为媒体查询和viewport配合使用才好吧。