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

Question

By using media query I would like to show the last element of the following list (2) when the screen width is above 768px.

Here is the jsfiddle like .
Here is the basic css code (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

Try this - 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

I've updated your jsfiddle: http://jsfiddle.net/yyQ5u/28/

It looks like the main problem was with the order of things and the actual media queries. I put your non-conditional CSS at the top of the CSS pane and the media queries below.

Then I tweaked the media queries which seemed to sort of cover each other:

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

and

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