关于css3 媒体查询@media

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

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

/*背景图片*/	

@media screen and (max-width: 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-width: 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配合使用才好吧。