html - 使用 CSS 响应式更改内容菜单

Question

我想只使用 CSS 做一个响应式菜单。

我正在尝试做类似的事情: - 当该 div 的宽度非常小时显示象形图。 - 当可用宽度稍大时，显示像“搜索”这样的小文本(没有象形图)。 - 当宽度稍大时，显示长文本，如“随心搜索”。

提前致谢

Answer 1

简短的回答是:它很复杂。纯 CSS 解决方案包括添加一个类，如下所示:

.hidden {
  visibility: hidden;
}

在给定特定视口(viewport)大小的情况下应隐藏 DOM 中的元素。现在您有了一个小实用程序类，您可以开始添加媒体查询来影响菜单中的各种类和 id。这里有点麻烦，您的 .hidden 类需要动态更改。真的，你最终会有更多这样的类(class):

.hidden-search-bar {
    visibility: hidden;
}

遍及您的 CSS 文件，每个只应用于特定的媒体查询。另一种方法是构建一个完整的网格系统，该系统使用实用程序类，例如:

.col-large-display-hidden {
    visibility: hidden;
}

因此您可以告诉浏览器，当它处于 large-display 视口(viewport)大小范围内时，它知道隐藏该类的任何内容。

我相信还有更多有趣的方法可以解决这个问题，但如果您希望能够将这些类转移到其他页面，那么您需要更加系统化。我建议查看 Twitter Bootstrap看看他们是如何处理这个问题的，但他们确实在整个框架中使用了 JavaScript(特别是 jQuery)。