css - 如何在移动设备上垂直堆叠 div，但在网络版本上保持水平？

Question

我添加了一些 div 标签以在 wordpress 帖子中创建两列。这是我使用的代码:

#container {
   width:100%;
}
#one {
   width:50%;
   float:left;
}
#two {
   width:50%;
   float:right;
}

我将上面的代码添加到我的 style.css 文件中。

在我的网页上查看时，一切看起来都很好。但是，在手机上查看时，它看起来很糟糕。下面的代码是我添加到帖子中的:

<div id="container">
<div id="one">content here</div>
<div id="two">content here</div>
</div>

我想做的是在移动设备上查看时垂直堆叠 div。对于编码经验有限的人，是否有一种相当简单的方法可以做到这一点？

谢谢

Answer 1

看看媒体查询。

@media all and (max-width:800px) //800px for tablets and phones.
{
    #one, #two
    {
        display: block; 
        float: none; 
        width: 100%;
    }
}

请注意，这必须跟在上面的代码之后，除非您使选择器更具体。