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

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

使用媒体查询和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>

将浮动元素转换为小屏幕上的堆叠元素

2 个答案:

Revised Fiddle