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

Question

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

Answer 1

解决方案是使用 CSS media query .媒体查询定义了一个 CSS block ，只有在满足特定条件(例如屏幕尺寸)时才会应用。根据 Mozilla 开发者网络，媒体查询的定义如下:

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

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

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

或者，如果您只希望屏幕宽度为 200 像素或更小的设备具有红色背景，您可以使用以下代码片段:

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

---

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