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

我已成功使用

@media

规则更改了iFrame和body内容宽度，但无法成功调整字体大小。在我的HTML中，我的

@media

规则位于我的样式css之后的单独文件中。我看不出是什么阻止了

字体大小

更改字体大小

JSFiddle（断开）：

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

---

非常感谢您的回答：）

也许您同时发出了不止一个媒体查询的信号。例如，您有一个媒体查询，询问最大宽度是否为

1200px

。然后，您会有另一个查询，询问最大宽度是否为

840px

，依此类推。我的意思是，当你触发1200px时，你也会触发840px。现在，我不是CSS专家，但我只是提供了一个局外人的观点。那是我的2美分

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

致以最良好的祝愿，

---

伊曼纽尔

随着屏幕大小的增加，最大宽度

不断被覆盖。但是，由于CSS在工作表中的位置较低，因此使用

心胸宽度

不会被覆盖。这使用CSS的级联特性来覆盖不相关的代码

e、 g

覆盖以前的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;
    }
}

---

iFrame src是您的域的一部分，还是来自其他网站？如果它来自另一个网站，如果它是跨域的，你就不能操纵iframe的内部html。这不是本例中的问题，因为我只是调整了它外部的填充。但是，字体大小是我的主要问题。操纵iframe的填充与操纵iframe中的字体大小有很大不同。我再问一次，iframe是否来自您的域？字体大小在iframe之外包装成。在iFrame之上 TexMex Resturant位于莫纳谷。我们的地址是新南威尔士州莫纳谷乔伊路18号，邮编2103。下面是一个交互式的谷歌地图，可以帮助您四处走动。

如果您提供问题中的所有信息，这将非常有用，也可以提供一个JSFIDDERECORT，说明媒体查询被以下查询覆盖。我将研究添加多个媒体查询。是的，你是正确的，这就是问题所在，我现在已经找到了解决方法。谢谢：）奥利弗，如果你找到了答案，请检查正确答案以显示你对伊曼纽尔的感谢：）祝你的项目顺利奥利弗！

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