@media查询中的字体大小不适用 [英] font-size in @media queries not applying

问题描述

我设法通过@media规则更改了iFrame和正文内容的宽度，但是我无法成功调整字体大小.在我的HTML中，我的@media规则位于我的样式css之后，位于一个单独的文件中.我看不到是什么阻止了font-size更改字体大小.

I have managed to get the iFrame and body content width to change with the @media rule however I cannot get the font-size to adjust successfully. In my HTML my @media rules come after my style css in a seperate file. I cannot see what is preventing the font-size from changing the font-size.

JSFiddle(残破):

JSFiddle (Broken):

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的级联特性来覆盖不相关的代码.

max-width is constantly being overridden as the screen size increases. However using mind-width is not being overridden as the CSS is lower down in the sheet. This uses CSS's cascading nature to override the irrelevant code.

例如

@media screen and (min-width: 840px)

覆盖以前的720px规则.当浏览器满足了更大屏幕的要求时，它将运行覆盖前一条语句的代码.

Overrides the previous 720px rule. As the browser has met the requirement for the larger screen it runs the code overriding the previous statement.

@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查询中的字体大小不适用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！