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

Question

通过使用媒体查询，当屏幕宽度高于 768 像素时，我想显示以下列表 (2) 的最后一个元素。

这是jsfiddle 之类的。
这是基本的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

试试这个 -演示

@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) {