@media 查询中的字体大小不适用

Question

我已经设法让 iFrame 和正文内容宽度随 @media 规则改变，但是我无法成功调整字体大小。在我的 HTML 中，我的 @media 规则在我的样式 css 之后出现在一个单独的文件中。我看不出是什么阻止了 font-size 更改字体大小。

JSFiddle（损坏）：

http://jsfiddle.net/OliverNChalk/1a04Lx4g/

样式CSS：

#bodycontent {
z-index: 2;
background-color: rgba(255,255,255,0.2);
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
font-family: 'Open Sans', sans-serif;
    font-size: 2em;
}
p {
    padding-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    color: lightgrey;
}

媒体规则如下：

    @media screen and (max-width: 560px) {

    #bodycontent {
        font-size: 1em;
        width: 95%;
    }

    p {
    padding-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    color: lightgrey;
    font-size: 1em;
}

    iframe {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    height: 400px;
    }
}

@media screen and (max-width: 840px) {
    #bodycontent {
        font-size: 1.4em;
        width: 95%;
    }

    iframe {
    margin-left: 0px;
    margin-right: 0px;
    width: 85%;
    height: 400px;
    }
}

@media screen and (max-width: 1200px) {
    #bodycontent {
        font-size: 1.7em;
        width: 95%;
    }

    iframe {
    margin-left: 0px;
    margin-right: 0px;
    width: 90%;
    height: 400px;
    }
    }

非常感谢任何答案:)

Answer 1

也许您同时发出多个媒体查询的信号。例如，您有一个媒体查询询问最大宽度是否为 1200px。然后您有另一个查询询问最大宽度是否为 840px，等等。我的建议是，当您触发 1200px 时，您可能也会触发 840px。现在，我不是 CSS 专家，但我只是提供局外人的观点。那是我的 2 美分。

如果我的回答不正确，祝你好运。

此致，伊曼纽尔

Answer 2

max-width 随着屏幕尺寸的增加不断被覆盖。但是，使用 mind-width 不会被覆盖，因为 CSS 在 sheet 中较低。这使用 CSS 的级联性质来覆盖不相关的代码。

例如

@media screen and (min-width: 840px)

覆盖之前的 720px 规则。由于浏览器满足了大屏幕的要求，它运行的代码覆盖了前面的语句。

@media screen and (min-width: 720px) {
    #bodycontent {
        font-size: 1.5em;
        width: 95%;
    }

    iframe {
    width: 90%;
    height: 600px;
    }
}

@media screen and (min-width: 840px) {
    #bodycontent {
        font-size: 1.7em;
        width: 95%;
    }

    iframe {
    width: 90%;
    height: 600px;
    }
}

@media 查询中的字体大小不适用

font-size in @media queries not applying

html

css

font-size

media-queries