做完页面后,用手机打开看后发现首页背景图变小了香菇炒肉的做法,留有空白,就是试着使用了媒体查询红蝴蝶@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%;2学制是填什么0 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配合使用才好吧。
本文发布于:2023-04-03 18:28:19,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/9d3d61841f170cf4c9398ac8a23a08b0.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:关于css3 媒体查询@media.doc
本文 PDF 下载地址:关于css3 媒体查询@media.pdf
留言与评论(共有 0 条评论) |