用css显示隐藏div

Question

我有一大部分代码，根据视图是移动的还是桌面的不同，这些代码有很多不同。我正试图用下面显示的代码来控制代码的哪一部分。这是我的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>

Answer 1

(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>

Answer 2

1. 在给定的代码中，缺少(max-width: 600px括号。正确的代码将是(最大宽度：600px(

2. 此外，确保你的头部有元标签

3. 最佳实践是在代码末尾将媒体查询从内部标记添加到外部CSS文件。

希望这能奏效。快乐编码！