如何使背景颜色在移动设备上响应？

Posted 2023-03-06

【中文标题】如何使背景颜色在移动设备上响应？

【英文标题】：How do I make the background color responsive on mobile devices?

【发布时间】：2014-10-17 19:26:19

【问题描述】：

我使用 bootstrap 创建了一个网站，响应式功能运行良好，除了 div 的背景颜色。元素（图像）被堆叠，但背景颜色仅保留在行中的第一个图像后面。我正在寻找一种在移动设备上扩展背景颜色的方法。

html：

<div id="omos">
 <div class="row">
 <div class="col-md-6 col-xs-12">
 <h2>Kristoffer Andreasen</h2>
 <a href="http://dk.linkedin.com/pub/kristoffer-andreasen/4b/2a0/645/"><img     style="height:280px; width:420px;" src="http://i.imgur.com/874qJmM.png" class="img-responsive"></a>
 <div class="Krille">
 <p>Indhold</p>
 <p>Marketing</p>
 <p>Webdesign</p>
 </div>
 </div>
 <div class="col-md-6 col-xs-12">
 <div class="Kalli">
 <h2>Kasper Hjortsballe</h2>
 <a href="http://dk.linkedin.com/pub/kasper-hjortsballe/55/942/5b9"><img style="height:200px; width:200px;" src="http://i.imgur.com/kTleong.png" class="img-responsive"></a>
 <p>Programmør</p>
 <p>Layout</p>
 <p>Grafik</p>
 </div>
 </div> 
 </div>
 </div>

CSS：

#omos 
background-color: #f7f7f7;
height: 80vh;
clear: both;
text-align: center;

我已经尝试了几种选择，但似乎没有一个可以解决问题。有谁知道该怎么做？

【问题讨论】：

你应该检查这个链接。 caniuse.com/#search=vh

【参考方案1】：

将高度属性设置为自动，它会正常工作。

height: auto

【讨论】：

感谢兄弟

【参考方案2】：

让我们想想你的样式表是做什么的，

高度：80vh；

这使我们做的事情是视口高度的 80%，所以如果我们的 div 在切换到 12 col 时堆叠在此之外，它不会获得颜色，因为您的颜色不是基于 div，而是是基于视口的，twitters 媒体查询但是会改变你的子元素并覆盖这个包装 div 的高度，所以你会卡住，我会看看 min-height 是否可以工作，或者如果可能的话一起删除高度（不确定是什么你的愿景是准确的）

【参考方案3】：

Bootstrap 使用媒体查询在不同大小的屏幕上显示不同的内容。如果您说您的 CSS 可以在桌面设备上运行，但不能在移动设备上运行，那是因为您没有使用媒体查询。

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) 



/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) 



/* Small Devices, Tablets */
@media only screen and (min-width : 768px) 
    /* your mobile css, change this as you please */
    #omos 
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    


/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) 



/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) 
    /* your desktop css */
    #omos 
        background-color: #f7f7f7;
        height: 80vh;
        clear: both;
        text-align: center;
    

【讨论】：

@media only screen and (min-width : 480px) 应该是@media only screen and (min-width : 576px) 这样设计就可以兼容bootstrap了。

@Md.HasanMahmud - BS4 上的断点发生了变化。我直接从 BS3 的文档中复制了这些内容。这是一个旧线程。

【参考方案4】：

删除 div 的 height 属性，它应该可以工作。

【讨论】：

这与 bg-color 有什么关系？ @dingo_d

我认为@CodeBlake 很好地解释了它为什么有效。容器的高度设置为80视口高度，内容超出视口高度，所以只要去掉它就会把颜色扩大到80vh之外。如果溢出被隐藏，那将是有意义的。