大家好，我做了一个网站，页面最左侧做了一个小图片，是浮动的，上下浏览网页一直在左边，电脑浏览正常，手机浏览的时候因为手机屏幕小，这个图片就会跑到页面中间，挡住文章正文，请教下大家，有没有代码让他在手机浏览的时候不显示，有没有更好的解决方法，谢谢！
这是这个图片的代码
div class="leftNav" ;="" style="position:fixed; left:10px; bottom:50%; margin-bottom:-260px; z-index:200"> <img src="v4/xf.jpg" alt="xf"> </div>
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
您好！为了实现在手机浏览时隐藏这个浮动图片，您可以使用CSS媒体查询（Media Queries）来针对不同屏幕尺寸应用不同的样式。下面是一个示例代码，展示了如何在屏幕宽度小于或等于某一阈值（比如600px，您可以根据实际情况调整）时隐藏这个图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.leftNav {
position: fixed;
left: 10px;
bottom: 50%;
margin-bottom: -260px;
z-index: 200;
}
/* 当屏幕宽度小于或等于600px时，隐藏左侧图片 */
@media screen and (max-width: 600px) {
.leftNav {
display: none; /* 隐藏元素 */
}
}
</style>
</head>
<body>
<div class="leftNav">
<!-- 这里是您的图片内容 -->
</div>
<!-- 其他页面内容 -->
</body>
</html>
这段代码中，@media screen and (max-width: 600px) 是一个媒体查询，它会检查设备的视口宽度是否小于或等于600像素。如果是，那么它内部定义的CSS规则将被应用，即.leftNav的display属性被设置为none，从而隐藏了这个元素。
这种方法既简单又有效，能够确保在小屏幕设备上提供良好的阅读体验，避免图片遮挡正文内容。当然，您也可以根据实际需要调整媒体查询中的宽度阈值，以适应不同的设备和布局需求。
