媒体查询有问题，没有任何反应答案

【问题标题】：Trouble with media queries, nothing happens媒体查询有问题，没有任何反应
【发布时间】：2017-05-09 03:40:01
【问题描述】：

我使用此代码在第二个 html 页面上完美运行媒体查询

@media only screen and (min-device-width: 200px) and (max-device-width: 1099px)  {
    .snebild img {
        width: 50%;
        max-width: 50%;
        right: 2%;
    }
    .title {
        margin-left: 4%;
        position: absolute;
        top: 10%;
    }
}

但在我的第二页上，我试图更改字体大小，使其在较低分辨率下看起来不错，但使用相同的代码只是更改为正确的类和 p 元素，但没有任何效果。

@media only screen and (min-device-width: 200px) and (max-device-width: 1099px)  {
    .introus p {
        font-size: 8px;
    }
}

这是 HTML

<div class="introus">
    <h2>Main Title</h2>

    <h4>Second title</h4>

    <p>Text to change size on when using lower resolution such as Iphones</p>
</div>

【问题讨论】：

使用第二页是怎么回事？
在其他条件相同的情况下，没有理由第二个代码块在第一个代码块运行时不起作用，所以要么 (1) 您有其他 CSS 干扰但未出现在问题或 (2) 您正在达到最小字体大小设置。
“我的第二页”是什么意思？该页面是否使用不同的 CSS 表？您是否还在 CSS 中选择页面，以便您提到的第二条媒体规则仅适用于它？另外，使用 (max-width: #px)` 而不是 (max-device-width: #px) - 在这里解释> stackoverflow.com/questions/18500836/…
可能其他选择器会影响p 的字体大小吗？大多数浏览器可以通过指定哪个选择器负责应用任何给定样式来帮助确定问题的根源。
确定第二页是另一个带有另一个 css 的 html（对不起）；）。并且感谢Yemachu，我注意到还有另一个字体大小的.introus p 正在干扰，我将如何解决这个问题？因为我需要正常视图的字体大小，但在较小的屏幕上查看这个字体大小？

标签： html css media-queries media

【解决方案1】：

我假设您是在桌面设备而不是移动设备上测试它。尝试将 min-device-width 更改为 min-width 应该可以。

如果我错了，请纠正我。

【讨论】：

在发帖之前已经尝试过了，改成 min-width 不起作用。

【解决方案2】：

您应该使用min-width 而不是min-device-width，因为宽度和设备宽度之间的主要区别在于设备宽度并不总是与所述设备的布局视口匹配。

更改该参数代码可以正常工作

@media only screen and (min-width: 200px) and (max-width: 1099px)  {
.introus p {font-size: 8px;}
}

<div class="introus">
            <h2>Main Title</h2>

            <h4>Second title</h4>

            <p>Text to change size on when using lower resolution such as Iphones.</p>
        </div>

【讨论】：

OP 说相同的媒体查询规则在不同的页面上可以正常工作。