Question

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

我准备好所有宽度都应该是百分比，我做这个例子

如何使用它的输入使表单响应不同的屏幕大小而不低于ul ??

Answer 1

问题是，您正在混合PX中设置的边距和以％设置的宽度。当屏幕尺寸调整到某些尺寸以下时，没有足够的空间用于边距大且输入低于的元素。

如果您正在进行代理设计，则应将边距设置为％。

以下是我修改代码以使其工作的方式：

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/

响应式设计模板

2 个答案: