如何解决使用 css 显示隐藏 div
我有一大段代码,根据视图是移动版还是桌面版,有很多不同之处。我正在尝试使用下面显示的代码控制显示哪一部分代码。这是我的 jsfiddle 无论我如何调整宽度,两个 div 都会出现。这是可能的还是我需要使用 javascript?
<style>
@media only screen and (max-width: 600px {
div.is-not-mobile {display:none;}
div.is-mobile {display:block;}
}
@media only screen and (min-width: 600px {
div.is-not-mobile {display:block;}
div.is-mobile {display:none;}
}
</style>
<div class="is-not-mobile">
<div>This is not a mobile view</div>
</div>
<div class="is-mobile">
<div>This is a mobile view</div>
</div>
解决方法
您在 )
和 (max-width: 600px)
中缺少右括号 (min-width: 600px)
。
<style>
@media only screen and (max-width: 600px) {
div.is-not-mobile {display:none;}
div.is-mobile {display:block;}
}
@media only screen and (min-width: 600px) {
div.is-not-mobile {display:block;}
div.is-mobile {display:none;}
}
</style>
<div class="is-not-mobile">
<div>This is not a mobile view</div>
</div>
<div class="is-mobile">
<div>This is a mobile view</div>
</div>
,
-
在给定的代码中缺少
(max-width: 600px
括号。正确的代码将是 (max-width: 600px) -
另外,请确保您的头部部分中有元标记
-
最佳做法是尝试在代码末尾将来自内部标签的媒体查询添加到外部 CSS 文件中。
希望这会奏效。快乐编码!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。