css - sass 媒体查询最小宽度的意外行为

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;}

目前 min-width: 768px 适用于 992px 以下的所有内容。例如，在 440px 宽度下，它的字体大小仍然是 2rem。从未使用过 3rem 字体大小。需要注意的一件有趣的事情是，这只发生在 Chrome 响应式设备测试器中。如果我把实际的窗口变小，它就可以工作了。

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;}