我目前正在尝试自学一些响应式设计，并且只想就解决我遇到的问题的最佳方式提出一些意见。我决定首先让我的一个现有元素 ( https://github.com/antm611/MusicServerGUI ) 在移动设备上运行。为此，我将剥离 Twitter Bootstrap 库并使用我自己的 CSS。
如您在 GitHub 上的屏幕截图中所见，主“专辑” View 的左侧有一个 Pane 用于选择艺术家，右侧有一个 Pane 用于显示所选艺术家的专辑。我用两个单独的无序列表实现了这一点。但是，对于视口(viewport)较小的设备，我的计划是将其显示为一个列表，按以下结构排列:
- 艺术家 1
- 音乐人 2(已选择)
- 专辑 1
- 专辑 2(已选择)
- 轨道 1
- 轨道 2
- 专辑 3
- 艺术家 3
如果我只是独立设计移动网站，我会使用嵌套列表来实现(如上所述)。但是，这需要实际的 HTML 有所不同。据我了解响应式设计，目标通常是使用相同的标记，但根据媒体查询更改它向用户显示的方式。
如果有人能指出解决此类问题的“最佳”方法，我将不胜感激。
非常感谢!
最佳答案
好吧，我会在普通屏幕上的相同相册 UL 中创建一个 div 元素，唯一的区别是它会显示 : none 最初，您将在较小的视口(viewport)上将其更改为 display: block ，同时将当前 albums 列设置为 display : 无。所以，基本上，这是一个开关(显示/隐藏)。
关于html - 响应式设计和显示嵌套列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25348737/