使用CSS响应地更改内容菜单

Question

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

我正在尝试做类似的事情： - 当div的宽度非常小时显示象形图。 - 当有更多宽度可用时，显示“搜索”（没有象形图）等小文本。 - 当宽度稍微宽一点时，显示“搜索任何你想要的”这样的长文本。

提前致谢，

Answer 1

简短的回答是：它很复杂。仅CSS的解决方案包括添加如下类：

.hidden {
  visibility: hidden;
}

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

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

遍布CSS文件，每个文件仅适用于某个媒体查询。另一种方法是构建一个使用实用程序类的整个网格系统，如：

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

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

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