自适应设计

Question

这样的IM自我自学响应式设计&我试图把一个右手分频器，大小保持不变，而左手推右侧格下来之前重新调整到240 ..

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

现在，随着它的设置方式，我似乎无法得到正确的股利下来，一旦屏幕宽度减少到480px以下左侧。

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（MENU）？设计这种方式的原因是，左侧内容对于所有屏幕尺寸都是可缩放的（从而避免了特定设备的断点），但是在达到480像素的位置，我希望元素能够一个接一个地显示出来。

JS FIDDLE

Answer 1

经过一些幸运研究后，我发现下面的工作似乎有效，但我不确定这是否合理或“脏”的修复;

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

因此，需要为异常，其中，所述余量左的<div class="menu"></div>被更新为0px一个最小宽度和最大宽度。

所以下面的480像素的屏幕宽度，将右侧菜单DIV下移左侧导航格低于设备...

Answer 2

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

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

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

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