Question

我正在处理有媒体查询的设计。在较大的设计中，我有一些被hide();隐藏的项目。

但在较小的设计中，我希望它们能够继续展示。所以我使用了display:block !important值。

现在，较大版本中的内容已设置为显示。哦，混乱！

风格：

@media only screen and (min-width: 180px) {
    .backCat{display:block !important;}
}

@media only screen and (min-width: 768px) {
    .backCat{display:none;}  // no clue what to put here
}

HTML：

<div id="releases">
    <h3>Releases</h3>
    <ul>
        <li>
            <h4>Strangers on a Plain</h4>
            <img src="http://placehold.it/160x160">
            <p><b>Released:</b>August 2011</p>
        </li>
        <li class="backCat"><h4>Nagano Car Rental</h4><img src="100x100.gif">
            <p><b>Released:</b>August 2010</p>
        </li>

        <li class="backCat"><h4>Panic Box</h4><img src="100x100.gif">
            <p><b>Released:</b>May 2009</p>
        </li>
    </ul>
    <a href="#" style="float:left; margin-bottom:10px;" class="moreReleases">More Releases</a> 
</div> <!-- end releases -->

JS

$(document).ready(function() {
    $('.backCat').hide();
    $('.moreReleases').click(function(){
        $('.backCat').show(500);
        $('.moreReleases').hide();
    });
});

Answer 1

!important声明优先，因为当您的第二个媒体查询满足时，您的第一个媒体查询中的min-width条件仍为真。将您的第一个媒体查询更改为@media only screen and (min-width: 180px) and (max-width: 767px)。您也可以简单地将important放在display: none;声明后面。

Answer 2

您可能需要为较小的屏幕版本设置最大宽度，因为768至少为180

Answer 3

好的，测试了我上面建议的想法并且它有效：

<style>
@media only screen and (min-width: 180px) {
    .moreReleases{ display: none; }
}

@media only screen and (min-width: 768px) {
    .backCat{display:none;}
    a.moreReleases{display: inline;}
}    
</style>

<div id="releases">
    <h3>Releases</h3>
    <ul>
        <li>
            <h4>Strangers on a Plain</h4>
            <img src="http://placehold.it/160x160">
            <p><b>Released:</b>August 2011</p>
        </li>
        <li class="backCat"><h4>Nagano Car Rental</h4><img src="100x100.gif">
            <p><b>Released:</b>August 2010</p>
        </li>

        <li class="backCat"><h4>Panic Box</h4><img src="100x100.gif">
            <p><b>Released:</b>May 2009</p>
        </li>
    </ul>
    <a href="#" style="float:left; margin-bottom:10px;" class="moreReleases">More Releases</a> 
</div> <!-- end releases -->
<script language="javascript">
$(function() {
    $('.moreReleases').click(function(){
        $('.backCat').show(500);
        $('.moreReleases').hide();
    });
});

</script>

在小布局上我们什么都不做，只是让链接显示（并隐藏更多版本链接，因为它不需要）。在较大的显示器上，我们默认隐藏块并显示moreReleases链接。单击该链接可以执行之前的操作，显示块并隐藏链接。

Answer 4

.hide（）是“浏览器大小不可知”并且无论您的浏览器大小是什么都将运行，这就是为什么.backCat将在较小的屏幕上被删除的原因。你想从js中删除它。

一旦你消失了，你将需要删除！重要，所以它读取：

@media only screen and (min-width: 180px) { .backCat{display:block;} }

现在.backCat将显示在较小的屏幕上，但在较大的屏幕上关闭。剩下的就是你必须为.moreClease添加stying，以便在隐藏.backCat时显示（使用display：block或者某些内容），并在显示.backCat时隐藏（即display：none）。

希望这有帮助！

在显示/隐藏时显示属性

4 个答案: