Question

我已设法通过@media规则更改iFrame和正文内容宽度但是我无法成功调整字体大小。在我的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会不断被覆盖。但是，由于CSS在工作表中较低，因此不会覆盖使用mind-width。这使用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;
    }
}

@media查询中的font-size不适用

2 个答案: