0

メディアクエリを使用して、画面幅が 768px を超える場合に、次のリスト (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>​
4

3 に答える 3

1

jsfiddleを更新しました：http：//jsfiddle.net/yyQ5u/28/

主な問題は、物事の順序と実際のメディアクエリにあったようです。無条件のCSSをCSSペインの上部に配置し、メディアクエリを下に配置します。

次に、お互いをカバーしているように見えるメディアクエリを微調整しました。

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

と

@media only screen and (min-width: 768px) {
于 2012-09-20T17:24:43.970 に答える
1

メディア クエリで最小幅と最大幅を設定できます。

 @media screen and (min-width: 480px) and (max-width: 768px) {
于 2012-09-20T17:17:05.943 に答える
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;
    }
}
于 2012-09-20T17:14:54.700 に答える