使用 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

在给定的代码中，您缺少 (max-width: 600px 括号。正确的代码是 (max-width: 600px)
此外，请确保您的头部部分有元标记
最佳做法是尝试在代码末尾将媒体查询从内部标记添加到外部 CSS 文件。

希望这会奏效。编码愉快！

使用 css 显示隐藏 div

Show-hide divs with css

css

mobile

hide