响应式设计模板答案

【问题标题】：Responsive design template响应式设计模板
【发布时间】：2015-03-08 16:14:37
【问题描述】：

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

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

http://jsfiddle.net/hQBR6/

如何在不低于 ul 的情况下使其输入的表单响应不同的屏幕尺寸？？

【问题讨论】：

标签： css responsive-design

【解决方案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; 
}

注意：我只使用了左右边距，实际尺寸由您决定。

希望对你有帮助

【讨论】：

【解决方案2】：

为了您的快速入门，请通过以下链接找到很好的示例来开始响应式设计。

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

【讨论】：

这太宽泛了。没有提供问题的具体答案。