html - 手机上的div宽度

Question

我有三个 div，我想横跨浏览器的整个宽度(每个 div 各占屏幕的 33%)。在移动版本上，我将每个 div 包装在一个堆栈中并降序排列，一个在另一个之上。但我希望每个 div 跨越 100% 的移动宽度。

我应该将每个 div 的宽度设置为多少才能实现此目的。当我将每个 div 的宽度设置为 33% 时，它适用于桌面版本，但在移动设备上每个 div 都被压缩到 33% 的空间中。

<style type="text/css">
.wrapdiv {
 display: inline-block;
 margin: 0;
 vertical-align: top;
 padding:20px;
}
</style>


<div class="wrapdiv" style="">
</div>

<div class="wrapdiv" style="">
</div>

<div class="wrapdiv" style="">
</div>

Answer 1

您可以使用媒体查询使其响应。代码显示当屏幕达到 420px 时将应用宽度。

 @media screen and (max-width:420px){
    .wrapdiv{width:100%;}
    }