做完页面后，用手机打开看后发现首页背景图变小了，留有空白，就是试着使用了媒体查询@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配合使用才好吧。
