html - 网站元素在较小的屏幕尺寸下不继承颜色

Question

我的网站标题包含在设置为蓝色背景和黄色字体颜色的行中，标题、口号和电话号码在桌面模式下都可以正确呈现，但电话号码在较小的屏幕尺寸下无法正确呈现颜色(出现褪色蓝色的)。标题和标语在 hgroup 中，但电话号码的元素类为“fonebanner”。我已经尝试了多种 HTML 和 CSS 脚本变体但无济于事，可以查看网站模型 here - 感激地收到了建议。

.row2 {
        background-color: #0000ff;
        color: #ffff00;
    }
    #header .fonebanner {
        clear: right;
        float: right;
        margin-top: 25px;
    }
    #header .fonebanner h2 {
        font-family: Arial, sans-serif;
        font-size: 3em;
        font-weight: bold;
    }

    @media screen and (min-width: 180px) and (max-width: 479px){
    #header .fonebanner {
        display: block;
        float: none;
        margin: 0 0 20px;
    }
    #header .fonebanner h2 {
        font-size: 2em;
    }
    }

<div class="row2">
      <header id="header">
        <div id="hgroup">
          <h1>ABC HTMLDESIGNS</h1>
          <h2>Catchy Slogan!</h2>
        </div>
        <div class="fonebanner">
          <h2>01234 987654</h2>
        </div>..............

Answer 1

看起来你的 css 中缺少括号

@media screen and (min-width: 180px) and (max-width: 479px)
    #header .fonebanner {
        display: block;
        float: none;
        margin: 0 0 20px;
    }
    #header .fonebanner h2 {
        font-size: 2em;
    }

应该是

@media screen and (min-width: 180px) and (max-width: 479px) {
    #header .fonebanner {
        display: block;
        float: none;
        margin: 0 0 20px;
    }
    #header .fonebanner h2 {
        font-size: 2em;
    }  }