css - 响应式设计

Question

所以我自学了响应式设计，并尝试将右手的分隔线放在一起，保持相同的大小，而左手的大小调整为 240，然后再将右手的 div 向下推。

推理 - 以便更改窗口大小保持正确的格式并且设计适用于各种移动设备(低至 240 像素)。

现在使用它的设置方式，一旦屏幕宽度减小到小于 480px，我似乎无法让正确的 div 向下推到左侧下方。

CSS

.menu {
position: relative;
float: left;
min-width: 240px;
margin-left: -240px;
}
.content {
position: relative;
float: left;
min-width: 240px;
}

@media screen {
    .content {
        width: calc(100% - 240px);
        margin-right: 240px;
    }
    .menu {
    }
}

对于宽度为 480 像素或更小的设备，我想不通的是在左侧 div (CONTENT) 之后强制显示 div (MENU)？以这种方式设计的原因是左侧内容可以针对所有屏幕尺寸进行缩放(从而避免特定设备的断点)，但是在达到 480px 的位置我希望元素一个接一个地显示..

JS FIDDLE

Answer 1

经过一些幸运的研究，我发现以下似乎有效，但我不确定这是合理的还是“肮脏的”修复；

@media (min-width: 1px) and (max-width: 479px) {
    .menu {
        margin-left: 0px;
    }
}

因此异常需要最小宽度和最大宽度，其中<div class="menu"></div>的左边距|更新为 0px。

因此在屏幕宽度为 480px 的设备下方，它会将右侧菜单 div 向下移动到左侧导航 div 的下方...