首页 > 作文

关于css3 媒体查询@media

更新时间:2023-04-03 18:28:21 阅读: 评论:0

做完页面后,用手机打开看后发现首页背景图变小了香菇炒肉的做法,留有空白,就是试着使用了媒体查询红蝴蝶@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 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图