Javascript 如何根据屏幕大小为元素创建动态宽度？

这是我的密码：

.container{
边框：1px实心；
宽度：70%；
}
艾尔先生{
边框：1px纯红；
显示：内联块；
最小宽度：250px；
}

一
二
三
四
五
六
七
八

看看

使用示例：

// Foo's original width is 100%
.foo {
    width: 100%
}

@media screen and (max-width: 100px){
    // Foo's width will be 50% when the view's width is below 100px
    .foo {
        width: 50%
    }
}

... OR ...

@media screen and (min-width: 100px){
    // Foo's width will be 50% when the view's width is over 100px
    .foo {
        width: 50%
    }
}

---

尝试使用css flex box。应用

显示：flex容器的属性，并使用
flex grow:1操作容器内的项目
.el
将它们伸展到屏幕的剩余宽度，并相应地共享空间


.container{
显示器：flex；
宽度：70%；
边框：1px纯黑；
}
艾尔先生{
边框：1px纯红；
柔性生长：1；
}

一
二
三
四
五
六
七
八

.container{
边框：1px实心；
宽度：70%；
显示：表格；
表布局：固定；
}
艾尔先生{
边框：1px纯红；
最小宽度：自动；
显示：表格单元格；
}

一
二
三
四
五
六
七
八
鉴于我自己做过这件事，我几乎完全确定最好的方法是使用flexbox的
flex wrap
使项目溢出，并
flex增长
，使它们尽可能占据更多空间

<div id="cont">
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
  <div>asdf</div>
</div>

看，还是继续

请注意，这不是一个网格系统，因此最后一行的列宽不会与前面所有行（完整行）的列宽相同。如果您希望在空间可用的情况下单元格溢出，并且在最后一行看起来像一个网格，则需要添加一些JavaScript。
最好的解决方案是使用引导。这将为您节省大量时间。唯一的方法是使用CSS网格和适当的回退。否则，宽度决定每行有多少元素，反之亦然。
#cont {
  display: flex;
  flex-wrap: wrap;
}

#cont div {
  flex-grow: 1;
  background: red;
  padding: 10px;
  margin: 10px;
}