移动视口上的手风琴菜单

Question

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

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

但它似乎使情况变得更糟。什么是最好的解决方法？

继承我的代码 - http://codepen.io/Ahhmmogh/pen/ZGxLmo

非常感谢任何帮助。

Answer 1

你需要做一些CSS才能完成这项工作，为此你需要在CSS中使用Media-queries：

> /*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 meta的主要任务是扩展您的页面以适应客户端视图端口，以获取更多信息：Viewport。