Question

我的网站标题被包含在一行设置为蓝色背景和黄色字体颜色，标题，标语和电话号码都在桌面模式下正确呈现，但电话号码在较小的屏幕尺寸下无法正确呈现颜色（显示为褪色）蓝色）。标题和口号在hgroup内，但电话号码的元素类别为“fonebanner”。我尝试了几种不同的HTML和CSS脚本，但无济于事，可以查看该网站的模型here - 感谢收到的建议。

＆＃13;

.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;
    }
    }

＆＃13;

<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>..............

＆＃13;

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;
    }  }

Answer 2

您可以添加以下css代码，您可以在小屏幕中明确地应用您的风格。采取这种风格的重要力量。

   @media screen and (min-width: 180px) and (max-width: 479px){
      #header, .row2{
       background-color:#fff !important;
      }

   }

网站元素不会在较小的屏幕尺寸中继承颜色

2 个答案: