如何使用媒體查詢顯示/隱藏元素？

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