css - 响应式设计模板

Question

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

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

http://jsfiddle.net/hQBR6/

如何使带有输入的表单响应不同的屏幕尺寸而不低于 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; 
}

注意:我只玩了左/右边距，实际尺寸由您决定。

希望对你有帮助