Javascript 动态css内容

今天，我有一个选项卡栏，看起来像这样：

如果查看代码，所有大小都是静态的：-( 因此，我有几个尺寸问题：

有时我有4个按钮，有时有5个

在某些手机（如iPhone 5/SE）上，屏幕上的酒吧正在消失：-(

所以，我想知道是否有办法解决这个问题

主要是第二个问题，当屏幕对于条来说太小时，所有内容都应该动态调整大小以匹配屏幕大小

---

有什么想法吗？

您可以使用“最大/最小宽度”属性，这样它可以根据屏幕更改整个条的大小。您还可以设置媒体查询，以便在点击时，例如700px，它将更改该按钮的大小。然后您可以在父容器中使用flexbox，并尝试将其设置为flex wrap:wrap；这样项目就会下降到新的一排。

---

如果这些都不是您想要的方式，那么您可以使用vw设置字体/图标的大小，同时使用工具栏上的“最大/最小宽度”。尝试这些设置，看看它们是否有助于提供您需要的结果。

我对您的代码笔做了一些更改，以使其发挥作用。主要设置每个菜单项的宽度和最大宽度

宽度：10vw；最大宽度：65x；

。因此，当屏幕较小时，它将使用视觉宽度“vw”，直到达到65px，然后它将使用该宽度

$（“.mobilebar选项卡项”）。单击（函数（）{
$（“.mobilebar选项卡项”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
$（“.mobilebar选项卡覆盖”）.css({
左：$（this）.prevAll（）.length*65+“px”
});
})；

.mobilebar容器{
位置：固定；
底部：15px；
z指数：12；
左：50%；
转化：translateX（-50%）；
}
.mobilebar选项卡{
高度：40px；
宽度：适合的内容；
背景色：#fff；
盒影：0 10px 6px 0 rgba（0,0,0,0.175）；
边界半径：6px；
溢出：隐藏；
边框：10px实心#fff；
显示器：flex；
位置：相对位置；
弹性收缩：0；
底部：0px；
}
.mobilebar选项卡项{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
宽度：5vw；
最大宽度：65px；
弹性收缩：0；
光标：指针；
过渡：0.3s；
位置：相对位置；
z指数：2；
}
.mobilebar-tab-item.active{
宽度：10vw；
最大宽度：105px；
}
.mobilebar选项卡覆盖{
边界半径：6px；
背景色：#f0；
身高：100%；
宽度：10vw；
最大宽度：105px；
位置：绝对位置；
左：0；
排名：0；
过渡：0.3s；
}
.mobilebar-tab图标{
显示：块；
颜色：#F96972；
过渡时间：0.3s；
线高：1；
}

研究“响应式设计”这一术语，你将成为你的朋友。

@media

将成为你的朋友。Iphone 5s的宽度将为360px。因此，你必须使用媒体查询来相应地调整宽度。你使用了flex shrink:0；因此这些宽度不会缩小，请尝试删除这些flex shrink。你已经接近解决方案了，这是一项有趣的技术我现在遇到的问题是“叠加”并没有正确地放置在按钮上。这是在屏幕很小的时候，但在大屏幕上有一个偏移量。它似乎与“65px”有关在JS中硬编码！有没有解决这最后一步的想法？顺便说一句，我已经用一些修复程序更新了我的代码，以获得我想要的。但是我希望条形图的最大宽度为400px。我如何管理？

stuffs like width: 400px; etc...