html - 在移动其他 DIV 的位置之前将 aa 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" />

然后只需将代码放入手机中，或者如果您想要响应式布局，您应该使用百分比作为宽度。