Question

我真的坚持这个，因为我的@media查询适用于第一条规则，但不适用于它之后的任何内容。

例如，我有＆＃34; subButton＆＃34;当屏幕低于设定宽度时消失，但我还需要将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>

Answer 1

这必须归因于特异性。我测试了它，它工作正常。你错过了那个街区的最后一个大括号。检查.primaryContainer h2并查看活动的样式。可能会从某个地方调用并应用其他类或ID。

Answer 2

一些事情。

1）什么是#subButton？我认为它是<button>。

2）取出only。我不明白你为什么会这样。如果我错了，请纠正我，我不认为这是正确的语法。

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

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

希望这有帮助！

Answer 3

试试这个

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

检查您是否已启用视口

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

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

3 个答案: