javascript - 如何根据屏幕尺寸为元素设置动态宽度？

Question

这是我的代码:

.container{
  border:1px solid;
  width: 70%;
}

.el {
  border: 1px solid red;
  display: inline-block;
  min-width: 250px;
}

<div class="container">
  <div class="el">one</div>
  <div class="el">two</div>
  <div class="el">three</div>
  <div class="el">four</div>
  <div class="el">five</div>
  <div class="el">six</div>
  <div class="el">seven</div>
  <div class="el">eight</div>
</div>

请运行上面的代码片段，单击整页 按钮并调整页面大小。我想将 div.container 分成相等的部分。

所以如果一行中有三个元素(div.el)，那么它们的width应该是33%。如果一行中有两个元素，则 width 应为 50%。

我该怎么做？请注意，我不想使用任何框架，例如 Bootstrap。

Answer 1

查看Media Queries

使用示例:

// 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%
    }
}