關於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配合使用才好吧。