关于css3 媒体查询@media

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

 

 

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

 1 /*背景图片*/    
 2 
 3 @media screen and (max-width: 768px) {    
 4     .body_img {
 5         position: fixed;
 6     right:0px;
 7     top:0px;
 8     width: 100%;
 9     height: 100%;
10     z-index:-9999;
11        background: url(body_bg_sj.jpg) center top no-repeat;
12     }
13 }
14 @media screen and (min-width: 768px) {    
15     .body_img{
16     position: fixed;
17     right:0px;
18     top:0px;
19     width: 100%;
20     height: 100%;
21     z-index:-9999;
22     background: url(body_bg.jpg) center right no-repeat;
23     }
24 }

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

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

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