javascript - 移动视口(viewport)上的 Accordion 菜单

Question

我创建了一个包含多个 Accordion 的页面，但在使其与移动设备兼容方面遇到了很多问题。我想让它做的是随着尺寸的减小， Accordion 开始压缩成一行。我试过使用

<meta name="viewport" content="width=device-width">

但这似乎使情况变得更糟。解决这个问题的最佳方法是什么？

这是我的代码笔 - http://codepen.io/Ahhmmogh/pen/ZGxLmo

如有任何帮助，我们将不胜感激。

Answer 1

你需要做一些 CSS 来完成这个，为此你需要 Media-queries在你的 CSS 中:

> /*Select your break point*/
>     @media (max-width: 500px) {
>       /*Make the elements fit with the whole width */
>       .container {
>         min-width:100% !important;
>       }
>       .whole-body{
>         min-width:100% !important;
>       }
>     }

工作:jsfiddle .

请注意:视口(viewport)元的主要任务是缩放页面以适应客户端视口(viewport)，有关更多信息:Viewport .