1

再会

我正在设置opacity2 个元素，一个li元素和一个image元素。在hover效果上，我消除了不透明度。

问题：我正在使用媒体查询在手机上显示我的网站。问题是，当我为 设置媒体查询时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：如果有更好的解决方案，您不应该使用。请阅读以下内容：

当两个 CSS 规则发生冲突时，优先级顺序为：

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

所以，检查你的 CSS 看看发生了什么。也许您可以将媒体查询移到样式表的末尾...

如果您仍然有问题，请发布一个完整的示例。

于 2013-02-15T10:55:40.340 回答
0

检查您是否对同一项目进行了多次调用。这就是发生在我身上的事。它们都堆叠在一起，形成了一个坚固的物品！

于 2014-08-11T05:13:47.000 回答