javascript - 3 个 33.33% 宽度的 Div 在移动设备上变为 100% 宽度

Question

我知道如何用 javascript 做到这一点 我只是想知道是否有一些花哨的 css 可以做到这一点。我想要它，这样当我移动时，每个 div 都会占据整个屏幕。这是它目前的样子。

这是每个 div 的一些 CSS。

.center{


background-color:#ffffff;
  width:33.33%;
  height: 100%;
  display: inline-block;

}

.left{
  background-color:#ffffff;
  width:33.33%;
  height: 100%;
  float:left;
    overflow: hidden;

}

.right{
  background-color:#ffffff;
  width:33.33%;
  height: 100%;
  float:right;
   overflow: hidden; 
}

Answer 1

确定您希望 div 占据所有宽度的分辨率，并根据 media queries 应用不同的样式。 . This is how bootstrap does it.

600 像素宽断点处的基本示例。

@media (max-width: 600px) {
  .mybox {
    width:100%;
  }
}