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

【问题标题】：How to show/hide elements using media query?如何使用媒体查询显示/隐藏元素？
【发布时间】：2012-09-21 01:48:10
【问题描述】：

通过使用媒体查询，当屏幕宽度高于 768 像素时，我想显示以下列表 (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>

【问题讨论】：

标签： javascript css media-queries

【解决方案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;
    }
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

然后我调整了似乎相互覆盖的媒体查询：

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

和

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

【讨论】：