html - 在移动其他 DIV 的位置之前将 DIV 的大小调整为最小值

Question

我有两个 div，其中一个填充了文本，我希望它是流畅的/响应式的:

{
max-width: 600px;
min-width: 380px;
float: left;
}

然后我有另一个 div:

{
width: 340px;
float: left;
}

当我让浏览器全屏显示时，Wrapper 设置为 960px 完美对齐并且看起来不错。

我想要的是，当调整浏览器窗口大小时，第一个 div 会缩小，当它达到其最小宽度时，下一个 div 会向下跳转。

我意识到我可能需要@media 查询，我只是不知道该怎么做。

Answer 1

@media only screen and (max-device-width: 480px) {   
    /* PUT THE CODE IN HERE */


    width: 100%;
    float: left;
    clear: both;

}

或者使用 html 版本:

<link rel="stylesheet" media="screen and (max-width: 480px)" href="css/phone.css" />

然后只需将电话代码放在那里，或者如果您想要响应式布局 您应该使用百分比作为宽度。