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

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

JSFiddle（损坏）：

http://jsfiddle.net/OliverNChalk/1a04Lx4g/ 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;
    }
    }

非常感谢任何答案:)

max-width随着屏幕尺寸的增加不断被覆盖。然而使用mind-width不会被覆盖，因为 CSS 位于工作表的下方。这利用了 CSS 的级联特性来覆盖不相关的代码。

e.g.

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