html - @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

max-width 随着屏幕尺寸的增加不断被覆盖。但是，使用 mind-width 不会被覆盖，因为 CSS 在工作表中较低。这使用 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;
    }
}