【问题标题】:Media query font-size not resizing媒体查询字体大小未调整大小
【发布时间】:2016-07-30 00:29:42
【问题描述】:

我遇到了 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;
    }
}

字体将变为蓝色并加粗,但字体大小不会改变....帮助?

【问题讨论】:

  • 你设置了初始字体大小h1吗?为了使字体大小 % 起作用,它需要一个起始值,即。 15 像素

标签: css media-queries


【解决方案1】:

要使字体大小:##% 起作用,您需要设置父字体大小。因为 % 是父字体大小的百分比。如果你设置

h1{font-size:16px}

然后设置

h1{font-size:50%}

它不起作用,因为您覆盖了原始字体大小。

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

body{font-size:16px;}

http://jsfiddle.net/0np59ueh/

【讨论】: