网站元素不继承较小屏幕尺寸的颜色答案

【问题标题】：Element of Website not inheriting color in smaller screen sizes网站元素不继承较小屏幕尺寸的颜色
【发布时间】：2015-03-09 06:13:25
【问题描述】：

我的网站标题包含在设置为蓝色背景和黄色字体颜色的行中，标题、标语和电话号码都在桌面模式下正确呈现，但电话号码在较小的屏幕尺寸下无法正确呈现颜色（出现褪色蓝色）。标题和口号在 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>..............

【问题讨论】：

作为附录 - 我最近收到一个朋友的通知，他有一台亚马逊 Android 设备（手机），在该设备上一切正常，所以这可能是设备特定的问题。跨度>
这是一个怪癖：Apple 移动设备不会在我的网站标题元素中以除蓝色以外的任何颜色显示任何数字。我已将带有 Tel: 前缀的站点的索引页面更新为以黄色显示的电话号码，但该号码是蓝色的。

标签： html css

【解决方案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;
    }  }

【讨论】：

抱歉！ Ozgur，括号在CSS中我在副本中错过了它们。
我明白了。你说的颜色渲染不正确是什么意思？因为它看起来像是在 180px 和 479px 之间工作。并且您只在 #header .fonebanner h2 中指定 font-size 属性
正如我所说，它在桌面模式下运行良好，继承了 row2 的样式，我在各种 @media 屏幕中重置了字体大小以更好地适应较低的屏幕尺寸。然而，一位朋友发邮件说它似乎在他的亚马逊 Android 设备上运行良好 - 所以我很难过，我会尝试 Sagar 发布的建议.....谢谢！

【解决方案2】：

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

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

   }

【讨论】：

谢谢！ Sagar 我会试一试，但目前可能是某些设备的怪癖.....请参阅我对 Ozgar 的回复