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.

600px宽断点的基本示例。

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

Answer 2

绝对有奇特的＆＃39; css中的方法也可以用于同样的方法。 首先，您可以使用引导库来使您对HTML做出响应。 您可以参考以下链接：http://getbootstrap.com/

此外，您可以使用可执行相同任务的css媒体查询。 这是相同的链接：https://www.w3.org/TR/css3-mediaqueries/

选择您想要的分辨率并应用您的CSS。

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Answer 3

@media screen and (max-width: 600px) {
    .center,
    .left,
    .right {
        width: 100%;
    }
}

如果屏幕宽度小于600px，则divs变为100％宽度。

您可以更改适应您需要的最大宽度值

Answer 4

对于使用css的条件格式，您可以使用媒体查询。不幸的是，移动设备没有媒体查询。但是你可以设置最大值。宽度。例如：

@media only screen and (max-device-width: 600px){ 
    ... 
}

这样，屏幕宽度小于600px的任何设备都将获得...上的css。