如何使用媒体查询显示/隐藏元素？

Question

通过使用媒体查询，我想在屏幕宽度超过768px时显示以下列表（2）的最后一个元素。

这是jsfiddle like 这是基本的css代码（1）。

---

（1）

@media only screen and (min-width: 480px) {
    .menu li.hide{    
        visibility: none;
    }
}

@media only screen and (min-width: 768px) {
    .menu li.hide{    
        visibility: visible;
    }
}

---

（2）

<ul class="menu">
    <li>One</li>
    <li class='hide'>Nine</li>
</ul>​

Answer 1

试试这个 - DEMO

@media only screen and (max-width: 768px) {
    body{
        background:#030;
    }
    .menu li{    
        font:12px Verdana;    
        width:100px;
        padding-left:10px;
    }
    .menu li:last-child{    
        display: none
    }
}

@media only screen and (min-width: 769px) {
    body{
        background: honeydew;
    }
    .menu li{    
        font:22px Verdana;    
        width:200px;
        padding-left:20px;
    }
}

Answer 2

您可以在媒体查询中设置最小和最大宽度：

 @media screen and (min-width: 480px) and (max-width: 768px) {

Answer 3

我已经更新了你的jsfiddle：http://jsfiddle.net/yyQ5u/28/

看起来主要问题在于事物的顺序和实际的媒体查询。我把你的非条件CSS放在CSS窗格的顶部和下面的媒体查询中。

然后我调整了媒体查询，这些查询似乎互相掩盖：

@media only screen and (max-width: 768px) {

和

@media only screen and (min-width: 768px) {