为超小型设备导航添加背景颜色答案

【问题标题】：Add background color to extra small devices navigation为超小型设备导航添加背景颜色
【发布时间】：2014-11-05 10:15:31
【问题描述】：

我正在开发一个引导响应主题这里是 URL：http://hex-technologies.com/hex_demo/trans-exec/ 当我在小屏幕设备上查看它时，导航显示透明背景我想添加一个仅适用于小型设备的背景是否有任何与我的问题相关的类等待一个好的解决方案。提前致谢。

【问题讨论】：

【解决方案1】：

解决方案是使用 CSS media query。媒体查询定义了一个 CSS 块，仅当满足某些条件（例如屏幕大小）时才应用。以下是媒体查询的定义，根据 Mozilla 开发者网络：

媒体查询由媒体类型和至少一个表达式组成，该表达式通过使用媒体特性（例如宽度、高度和颜色）来限制样式表的范围。 CSS3 中添加的媒体查询让内容的呈现方式可以针对特定范围的输出设备进行定制，而无需更改内容本身。

如果您只希望手持设备具有红色背景，例如，您可以使用以下代码 sn-p：

@media handheld {
  body {
    background: red;
  }
}

或者，如果您只希望屏幕宽度为 200 像素或以下的设备具有红色背景，您可以使用以下代码 sn-p：

@media (max-width: 200px) {
  body {
    background: red;
  }
}

免责声明：定位移动设备时，您需要注意一些“陷阱”。第一个也是最成问题的一个是“设备像素”和“屏幕像素”之间的区别。你可以阅读更多关于这个问题以及如何解决它here。另外，请注意，大多数移动浏览器旨在动态在横向和纵向显示之间切换——但这不是什么大问题，因为还有一个媒体查询可用于确定屏幕方向。

【讨论】：

【解决方案2】：

目标引导程序的媒体查询，将导航更改为 768 像素。设置颜色，然后在768px及以上设置为透明：

.navbar-collapse {background: #000;}
@media (min-width: 768px){
  .navbar-collapse {background: transparent;}
}

【讨论】：