仅更改移动屏幕的标题背景答案

【问题标题】：Change header background for mobile screens only仅更改移动屏幕的标题背景
【发布时间】：2023-03-19 21:36:01
【问题描述】：

我正在尝试仅更改移动屏幕尺寸的标题背景颜色。以下操作无效。

理想情况下，我不想更改 header 或 header_wrap 代码，因为这工作正常。对于更多上下文，如果需要，我使用了这个小提琴：https://jsfiddle.net/eL1cabv9，但故意希望标题对于非移动尺寸的屏幕尺寸透明。

请帮忙。谢谢！

 @media screen and (max-width: 480px) {
  .ico {
    width: 100px;
    height: 100px;
  }

  .header {
    background: #ffffff;
  }
}

.ico {
  height: 300px;
  width: 300px;
  position: fixed;
  z-index: 999;
  top: 30%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  margin-left: 15px;
  margin-top: 16px;
}

header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: -125px;
}
.header_wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

【问题讨论】：

你的例子和你的小提琴看起来很不一样。你希望标题是什么颜色的？
我希望它是白色的（但仅限于 480 像素以下）。否则透明。

标签： html jquery css twitter-bootstrap frontend

【解决方案1】：

header {     
    background: transparent;
}
@media screen and (max-width: 480px) { 
    header {
        background: #FFF;
   }
}

小提琴：https://jsfiddle.net/1p86ms30/

【讨论】：

【解决方案2】：

您的代码是有效的，但 css 不能那样工作。只有最后提到的样式将应用于元素。让我解释清楚。

.box{width: 100px; height:100px; background: red;}
.box{background: green;}

<div class="box">
</div>

从这个示例 sn-p 可以看出。背景颜色“绿色”应用于盒子元素。 css 只是忽略了我提到 bg 颜色的第一行。

这里也一样。

您的代码：

@media screen and (max-width: 480px) {
  .ico {
    width: 100px;
    height: 100px;
  }

  .header {
    background: green;
  }
}

.body{margin: 0;}

.ico {
  height: 300px;
  width: 300px;
  position: fixed;
  z-index: 999;
  top: 30%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  margin-left: 15px;
  margin-top: 16px;
}

.header {
  width: 100%;
  height: 60px;
  position: fixed;
  background: red;
  left: 0;
  top: 0;
}
.header_wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

<html>
<head></head>
<body>
  <header class="header">
     <div class="header_wrap">
       <div class="ico">
         <span></span>
       </div>
     </div>
  </header>
</body>
</html>

解决方法：

始终在样式表底部编写媒体查询。

.body{margin: 0;}

.ico {
  height: 300px;
  width: 300px;
  position: fixed;
  z-index: 999;
  top: 30%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  margin-left: 15px;
  margin-top: 16px;
}

.header {
  width: 100%;
  height: 60px;
  position: fixed;
  background: red;
  left: 0;
  top: 0;
}
.header_wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

 
@media screen and (max-width: 480px) {
  .ico {
    width: 100px;
    height: 100px;
  }

  .header {
    background: green;
  }
}

<html>
<head></head>
<body>
  <header class="header">
     <div class="header_wrap">
       <div class="ico">
         <span></span>
       </div>
     </div>
  </header>
</body>
</html>

注意：检查响应中的两个 sn-ps 以便更好地理解。

编码愉快！

【讨论】：