当前位置： 移动技术网 > IT编程>网页制作>CSS > 关于css3 媒体查询@media

关于css3 媒体查询@media

2020年04月22日  | 移动技术网IT编程  | 我要评论

痤疮治疗王根会,武动乾坤笔下,伦教租房网

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

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网