响应式设计模板

Question

我是新兴的响应式设计，我想在网站模板中制作响应式菜单，图像，块和所有东西。

是否准备好所有的宽度应该是百分比，我有这样的例子

http://jsfiddle.net/hQBR6/

我怎样才能使与它的形式输入响应不同的屏幕尺寸，而不打算在UL之下？

Answer 1

问题是，您在PX中设置的混合边距和以％为单位设置的宽度。当屏幕大小调整到特定尺寸以下时，没有足够的剩余空间用于保证金大且输入低于下限的元素。

如果您正在进行repsonsive设计，您应该将边距设置为％。

这是我如何修改代码，使其工作：

ul#menu{ 
    border:1px solid black; 
    display: inline-block; 
    float:left; 
    max-width:50%; 
    margin-left:5%; /* changed to percentage */ 
    margin-top:36px; /* should be percentage as well*/ 
    list-style-type:none; 
} 
ul#menu li{ 
    display: inline-block; 
    float:left; 
    margin-right:36px; /* should be percentage as well*/ 
    width: auto; 
} 

#header form { 
    display: inline-block; 
    margin-right:1%; /* changed to percentage */ 
    float:right; 
    width:10%; 
} 

#header form input{ 
    margin-top:28px; 
    background-color: #e0e0e0; 
    border-radius:4px; 
    border:none; 
    height: 26px; 
    color:#a6a6a6; 
} 

注：我用左/右页边距和实际尺寸只打了是你来决定。

希望这有助于

Answer 2

您的快速启动，请点击以下链接经历，你会发现很好的例子开始响应式设计。

http://twitter.github.com/bootstrap/