Question

我正在使用媒体查询来更改网站上某些文字的字体大小。然而，它不起作用，因为我理解他们的工作。

p {
font-size: 3rem;
@media (min-width: 768px) {
    font-size: 2rem;
}
@media (min-width: 992px) {
    font-size: 1.5rem;
}
max-width: 1600px;
font-weight: 300;
margin-right: auto;
margin-left: auto;}

目前最小宽度：768px适用于992px以下的所有内容。例如，在440px宽度下，它仍然具有2rem的字体大小。从不使用3rem字体大小。值得注意的一件事是，这只发生在Chromes Responsive设备测试仪中。如果我使实际窗口变小，那么它就可以了。

Answer 1

由于您首先要使用移动设备（使用min-width），因此您应首先应用最小尺寸。试试：

p {
font-size: 1.5rem;
@media (min-width: 768px) {
    font-size: 2rem;
}
@media (min-width: 992px) {
    font-size: 3rem;
}
max-width: 1600px;
font-weight: 300;
margin-right: auto;
margin-left: auto;}

Answer 2

请确保在<head>此元标记中包含：

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

这意味着浏览器（可能）会以自己屏幕的宽度呈现页面宽度。因此，如果该屏幕宽度为320px，则浏览器窗口将为320px宽，而不是缩小并显示960px（或默认情况下该设备所做的任何操作，而不是响应式元标记）。

来源：Css tricks

sass media查询min-width的意外行为

2 个答案: