在小屏幕上将浮动元素变成堆叠元素

Question

我有 3 个框，它们目前在彼此的左侧浮动，

在智能手机上查看时，我希望框的宽度接近全屏，并且每个框的高度与视口的高度相同。这可能吗？

我试过在媒体查询中这样做，

.box {
    float:none;
    width:95%;
    margin:0 auto 20px;
    height:95%;
}

但在我的 iphone 6s 上，我仍然可以看到超过 1 个框和另一个框的 5%。

Answer 1

.box {
  width:350px;
  height:50vh;
  border:1px solid red;
  float:left;
  margin-right:10px;
}
@media screen and (max-width: 740px) {
  .box {
    float:none;
    width:95%;
    margin:0 auto 20px;
    height:96vh;
    }
}

写一个媒体查询和使用 'vh' -垂直高度给出高度测量值。 100vh 表示全屏高度。

Answer 2

When viewing on a smartphone I want the width of the boxes to be near full screen, and the height of each box to be the same height has the viewport. Is this possible to do?

使用媒体查询和 flexbox 是可能的（实际上非常简单）。这是智能手机视图：

body { 
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  border: 3px solid red;
  
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

在小屏幕上将浮动元素变成堆叠元素

Turning floated elements into stacked elements on small screens

html

css

media-queries

Revised Fiddle