Question

所以我自我教学自己的响应式设计＆amp;我试图把右手分隔器放在一起，保持相同的尺寸，而左手调整到240，然后再按下右边的div ..

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

现在按照它的设置方式，一旦屏幕宽度减小到小于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（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移至左侧导航区域下方...

Answer 2

看看this设计。我所做的就是首先让它移动，当屏幕宽度小于480px时，百分比宽度会使菜单占据100％的空间。

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

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

这种类型的设计首先被称为移动设备，您应该在网上阅读它。它使样式首先在手机上加载，然后在更宽的屏幕上逐步升级。

响应式设计

2 个答案: