Question

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

Answer 1

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

媒体查询由媒体类型和至少一个限制样式表的表达式组成。范围使用媒体功能，如宽度，高度和颜色。 CSS3中添加的媒体查询可以根据特定范围的输出设备定制内容，而无需更改内容本身。

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

＆＃13;

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

＆＃13;

或者，如果您只想要屏幕宽度为200px或更小的设备为红色背景，则可以使用以下代码段：

＆＃13;

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

＆＃13;

免责声明：在定位移动设备时，您需要了解一些＆＃34;陷阱＆＃34;。第一个也是最有问题的是设备像素和＃34;之间的区别。和一个＆＃34;屏幕像素＆＃34;。您可以详细了解该问题及其解决方法here。另外，请注意大多数移动浏览器都是为了实时在横向和纵向显示之间切换 - 但这不是一个大问题，因为还有一个媒体查询可用于确定屏幕方向

Answer 2

Target Bootstrap的媒体查询，它以768px的速度更改导航。设置颜色，然后将其设置为768px及以上的透明度：

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

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

2 个答案: