Question

我使用此代码在第二个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>

Answer 1

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

如果我错了，请纠正我。

Answer 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>

媒体查询麻烦，没有任何反应

2 个答案: