1

良い一日

要素とopacity要素の2つの要素を設定しています。効果として、不透明度を取り除きます。liimagehover

問題:携帯電話でサイトを表示するためにメディア クエリを使用しています。問題は、メディアクエリを設定すると1024px、をopacities完全に削除したいのですが、ビューポートが 1024px 未満の場合はトリガーされません...同様に更新されます

何故ですか：

コード：

HTML:

     <div id="app" class="span3">              
           <ul>
               <li id="apple"><a href="#" title="PartyAt for iPhone and iPad"><img src="images/apple.png" /></a></li>
               <li id="android"><a href="#"><img alt="PartyAt Android app on Google Play" src="images/android.png" /></a></li>                     
           </ul>
     </div>

 and

 <div id="social" class="row-fluid">
        <div class="span7"> 
            <div id="app2">              
                <a href="https://itunes.apple.com/za/app/partyat/id597807299?mt=8" title="PartyAt for iPhone and iPad"><img src="images/apple.png" /></a>
                <a href="https://play.google.com/store/apps/details?id=io.ik.partyat"><img alt="PartyAt Android app on Google Play" src="images/android.png" /></a>        
            </div>              
        </div>      
        <div class="span5">
            <a href="" title="PartyAt SA facebook page" target="_blank"><img src="images/fb.png" border="0" /></a>
            <a href="" title="PartyAt SA twitter page" target="_blank"><img src="images/twitter.png" border="0" /></a>             
        </div>
 </div>

CSS:

#app ul li{
        opacity:0.7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter:alpha(opacity=70);
        padding-bottom: 15px;
    }

 #social .span5 img {
        opacity: 0.7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter:alpha(opacity=70);
    }

メディア クエリ:

@media screen and (max-width: 1024px;){
 #app ul li {
        opacity:1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter:alpha(opacity=100);
        padding-bottom: 15px;
        }

 #social .span5 img {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter:alpha(opacity=100);
 }

}
4

2 に答える 2

1

メディアクエリはおそらく機能していますが、その後、上書きしています。

@media screen and (max-width: 1024px;){
    /* your custom styles... */
    #app ul li { opacity:1; }
}

/* normal styles */
#app ul li { opacity:0.7; }

!importantしたがって、競合を回避するために使用できます。

#app ul li { opacity:1 !important; }

警告：!importantより良い解決策がある場合は使用しないでください。以下をお読みください。

2つのCSSルールが競合している場合、優先順位は次のとおりです。

  1. !important優先度の高いルール
  2. インラインスタイルの方が重要です（<div class="someclass" style="inline style"></div>通常のスタイルよりも重要です）。
  3. より具体的なルール>あまり具体的ではない（#one .example tag .yeah> .yeah）
  4. 2つのルールの優先度が同じ場合、最後に適用されたルールが優先されます

したがって、CSSを調べて、何が起こっているかを確認してください。たぶん、メディアクエリをスタイルシートの最後に移動するだけです...

それでも問題が解決しない場合は、完全な例を投稿してください。

于 2013-02-15T10:55:40.340 に答える
0

同じアイテムの複数の呼び出しがあるかどうかを確認します。それが私に起こったことです。それらがすべて重なり合い、しっかりとしたアイテムができあがりました！

于 2014-08-11T05:13:47.000 に答える