css - 媒体查询字体大小不调整

Question

我遇到 h1 字体大小不随媒体查询改变的问题。我已经测试过更改其他样式，并且有效。所以，我很困惑为什么字体大小不会改变。

HTML:
<h1 class="header-h1">POVERTY IS NOT DESTINY</h1>

CSS:
    @media only screen and (max-width: 800px) {
    h1.header-h1{
        font-size:250% !important;
        color: blue !important;
        font-weight:bold !important;
    }
}

字体将变为蓝色并变为粗体，但字体大小不会改变....有帮助吗？

Answer 1

要使 font-size: ##% 正常工作，您需要设置父字体大小。由于 % 是父字体大小的百分比。如果你设置

h1{font-size:16px}

然后设置

h1{font-size:50%}

它不会工作，因为您覆盖了原始字体大小。

但是设置专利字体大小，例如正文。然后它将起作用。

body{font-size:16px;}

http://jsfiddle.net/0np59ueh/