响应式设计和显示嵌套列表

Question

我目前正在尝试自学一些响应式设计，只是想就解决我遇到的问题的最佳方法提出一些意见。我决定首先让我的现有项目 (https://github.com/antm611/MusicServerGUI) 在移动设备上运行。我将通过剥离 Twitter Bootstrap 库并使用我自己的 CSS 来做到这一点。

您可以从 GitHub 上的屏幕截图中看到，主“专辑”视图左侧有一个窗格用于选择艺术家，右侧有一个窗格用于显示所选艺术家的专辑。我通过两个独立的无序列表实现了这一点。但是，对于具有较小视口的设备，我的计划是将其显示为一个列表，按以下结构排列：

• 艺术家 1
• 艺人2（已选）
  • 专辑 1
  • 专辑 2（已选择）
    • 曲目 1
    • 曲目 2
  • 专辑 3
• 艺术家 3

如果我只是单独设计移动网站，我会使用嵌套列表（如上）来实现。但是，这需要实际的 HTML 有所不同。据我了解响应式设计，目标通常是使用相同的标记，但会根据媒体查询更改其向用户显示的方式。

如果有人能指出解决此类问题的“最佳”方法，我将不胜感激。

非常感谢！

Answer 1

好吧，我会在普通屏幕上的同一张专辑UL 中创建一个div 元素，唯一的区别是它最初会有display: none，而你可以将其更改为@987654324 @ 在较小的视口上，同时将当前的 albums 列设置为 display: none。所以，基本上，这是一个切换的东西（显示/隐藏）。