手风琴菜单上的移动视窗

Accordion menu on mobile viewport

本文关键字：移动 菜单 手风琴      更新时间：2023-09-26

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

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

但这似乎使情况变得更糟。做这件事最好的办法是什么?

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

你需要做一些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;
>       }
>     }

Working: jsfiddle .

注意:Viewport meta的主要任务是缩放你的页面以适应客户端视图端口，更多信息:

相关文章：