响应式设计

Question

所以我自学了响应式设计并且我正在尝试组装一个保持相同大小的右手 divider，而左手在推动右手之前将大小调整为 240 div下来..

推理 - 以便更改 window 大小保持正确的格式，并且设计适用于各种移动设备（低至 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 {
    }
}

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

JS FIDDLE

Answer 1

经过一些幸运的研究，我发现以下似乎有效，但我不确定这是否合理或 'dirty' 修复；

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

所以异常需要min-width和max-width，其中<div class="menu"></div>的margin-left更新为0px。

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

Answer 2

看看 this 设计。当您的屏幕宽度小于 480px 菜单占 space.

的 100% 时，我所做的是使其移动优先和百分比宽度

.content { 
  background:red;
  position: relative;
  width: 100%;
  height: 200px;
}

.menu {
  background:green;
  position: relative;
  width: 100%;
  height: 200px;
}

这种类型的设计称为移动优先，您应该在网络上了解它。它使样式首先在移动设备上加载 phone，然后在更宽的屏幕上逐步升级。

响应式设计

Responsive design

css

responsive-design

media-queries