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

【问题标题】：font-size in @media queries not applying@media 查询中的字体大小不适用
【发布时间】：2015-08-10 08:12:14
【问题描述】：

我已经设法让 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;
    }
    }

任何答案都非常感谢:)

【问题讨论】：

有问题的 iFrame src 是您域的一部分，还是来自其他网站？如果它来自另一个网站，如果它是跨域的，则无法操作 iframe 的内部 html
在这种情况下这不是问题，因为我只是在调整它外部的填充。但是字体大小对我来说是主要问题。
操作 iframe 的填充与操作 WITHIN iframe 的字体大小有很大不同。我再问一次，iframe 是否来自您的域？
字体大小被包裹在 iFrame 之外的
中。在 iFrame 上方。

TexMex Resturant 位于 Mona Vale。我们的地址是18 Barrenjoey Road, Mona Vale NSW 2103。下面是一个交互式谷歌地图，可以帮助您四处走动。
如果您在问题中提供所有信息将非常有用，也可以随时提供 JSFiddle

标签： html css media-queries font-size

【解决方案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;
    }
}

【讨论】：

【解决方案2】：

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

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

最好的问候，伊曼纽尔

【讨论】：

更正媒体查询被以下查询覆盖。我会考虑添加多个媒体查询。
是的，你是对的，这就是问题所在，我现在找到了解决办法，谢谢 :)
奥利弗，如果你找到了答案，请检查正确答案以表达对伊曼纽尔的感谢:)
祝你项目 Oliver 的其余部分好运！