css - 媒体查询中未设置元素的不透明度

Question

美好的一天

我在 2 个元素上设置 opacity，一个 li 元素和一个 image 元素。在 hover 效果上，我去掉了不透明度。

问题:我正在使用媒体查询在手机上显示我的网站。问题是，当我为 1024px 设置媒体查询时，我想完全去除 opacities，但是当视口(viewport)低于 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);
 }

}

Answer 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如果有更好的解决方案。请阅读以下内容:

当两条CSS规则冲突时，优先顺序为:

1. 规则 !important具有最高优先权
2. 内联样式比普通样式更重要(例如 <div class="someclass" style="inline style"></div>
3. 更具体的规则 > 不太具体的 ( #one .example tag .yeah > .yeah )
4. 如果两条规则具有相同的优先级，则最后应用的规则优先

因此，请检查您的 CSS 以了解发生了什么。也许您可以将媒体查询移动到样式表的末尾...

如果还有问题，请发一个完整的例子。