@media查询不适用于所有规则

我真的被困在这一个，因为我的@media查询适用于第一条规则，但不适用于它之后的任何规则。@media查询不适用于所有规则

比如我有“subButton”消失时，屏幕低于设定的宽度，但我也需要改变h2标题大小向下2.5em（目前4.5em在桌面上）。但是，在我的iPhone上查看时，只有subButton被媒体查询更改。

关于我在做什么的错误？

*编辑*我已经包含了我针对媒体查询的代码。我已经尝试了所有不同的类，身份证但仍然没有运气。任何进一步的深入了解是非常赞赏

/** Mobile **/ 
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) { 
    #subButton 
    { 
     display:none; 
    } 
    .primaryContainer h2 { 
     font-size: 2.5em; 
    } 
}

HTML

<section class="contentContainer" id="primaryBackground"> 
     <div class="container"> 
      <div class="row"> 
        <div class="col-md-8 col-md-offset-2 primaryContainer"> 
          <h2>Get Rocket Ship Growth!</h2><br> 
          <p>Weekly Step by Step Growth Hacking<br>Guides & Actionable Insight</p> 
          <button><a href="#section2">Learn More &or;</a></button> 
        </div> 
      </div> 
     </div> 
    </section>

来源

2015-05-29 Paul Towers

如果要实现这个CSS？你能否粘贴代码.. –

这要归功于特异性。我测试过了，它工作正常。尽管如此，你却错过了该块的最后一个大括号。检查.primaryContainer h2并查看哪些款式是活动的。可能会从某个地方调用并应用其他类或ID。

来源

2015-05-29 12:55:23

非常感谢你的帮助。我觉得我走在正确的道路上，但仍然遇到麻烦。我确实在代码中有最后一个大括号，只是把它复制错了。我已经添加了代码，我实际上试图用媒体查询进行更改。我已经尝试了所有不同的类和ID，但似乎无法使其工作。我猜我的代码有点混乱，因为我相当新的这个 –

有几件事。

1）什么是#subButton？我认为这是<button>。 2）取出only。我不明白为什么你会拥有它。纠正我，如果我错了，我不认为这是正确的语法。

3）为什么你需要max-width和max-device-width？这不是多余的吗？如果一个设备是500像素，你认为窗口大小是600px？因此，您只需要执行max-width，因为它不会超过max-device-width。

我在这里工作：https://jsfiddle.net/wfkr3w50/

希望这有助于！

来源

2015-06-01 04:54:24 jasonszhao

尝试，这也

.primaryContainer h2 {font-size: 2.5em !important;}

检查您是否正在启用视

"meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1""

来源

2015-06-01 05:29:20

@media查询不适用于所有规则

回答

相关问题