Question

所以我设法让以下代码工作：

@media screen and (max-width: 1024px) {
    .hide {
        display: none !important;
    }

}

这确保除非是1024px，否则不会显示带有“隐藏”类的div。

我如何才能使其相反（如果屏幕低于特定尺寸则会显示，如果屏幕较大则显示）？

我已经尝试查看多个教程等页面，但找不到合适的答案。

Answer 1

您可以尝试：http://jsfiddle.net/lotusgodkk/GCu2D/174/

CSS：

div {
    border:1px solid green;
    padding:10px;
    width:300px;
    height:300px;
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
    #my-content {
        display: block;
    }
    /* show it on small screens */
}
@media screen and (min-width: 1025px) and (max-width: 2048px) {
    #my-content {
        display: none;
    }
    /* hide it elsewhere */
}

HTML：

<div id="my-content"></div>

您可以使用max-width和min-width来获得所需的效果

Answer 2

Kamlesh的答案是正确的，但是您应该使用display: initial或display: inherit而不是display：block，因为这些不会混淆span元素，例如display: block可能会执行的操作。

Answer 3

最大宽度表示规则将不在该宽度之上触发。最小宽度意味着不会在该宽度以下触发规则。如果您希望以某个宽度和更大的宽度显示某些内容，请使用最小宽度。

示例：

@media only screen and (min-width:992px) {
  .hide (display: none;) // means that element with class 'hide' will be hidden at 992 pixels and above
}

Answer 4

显示是否<1000px !!!!!!!

                        winW = $(window).width();
                        $("#px").html(winW);
                        if(winW>1000){
                        $(".foo").hide();
                        }else{
                        $(".foo").show();
                        }
                        $(window).resize(function () {
                        winW = $(window).width();
                        $("#px").html(winW);
                        if(winW>1000){
                        $(".foo").hide();
                        }else{
                        $(".foo").show();
                        }
                        });

         .foo{
             height: auto;
             margin-top: 70px;
             border: 2px solid #E3E3E3;
             border-radius: 19px
         }

<html>
    <head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>

    <body> show if &lt; 1000px!!!!!!!
        <div class="foo" >
           <h1><center> show if &lt; 1000px   </h1>
        </div>

        <p id="px">
        </p>

    </body>
</html>

CSS3如果屏幕尺寸大于x，则不显示DIV

4 个答案: