css - 我怎样才能让这个表单和按钮在响应式设计中正确调整大小？

Question

我正在尝试创建一个自定义小部件，其中包括带有文本输入表单和按钮的背景图像。我使用的 wordpress 主题是基于 Twitter Bootstrap 的响应式设计。调整浏览器大小时，表单和按钮不会随背景图像一起调整大小。谁能帮我让它正常工作？您可以在 live site 页面右侧侧边栏的最底部查看小部件。 .

谢谢。

<form style="-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center;
padding: 30% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <p>
        <input type="text" style="width:170px;height:18px;margin-bottom:-110px;margin-left:-125px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/>
    </p>
    <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input type="submit"  style="margin-bottom:-134px;margin-left:-220px;" value="Subscribe" />

这是我的 styles.css(这是一个子主题)

/* ------------------------------------------------------------------------ Import Standard Styles */

@import url( '../standard3/style.css' );

/* ------------------------------------------------------------------------ Customizations */
#disqus_thread {
    clear: both!important;
    background: white;
    background: white;
    margin: 0 0 40px 0;
    position: relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
}

.dsq-comment-text p
{
color: black;
font-size: 13px;
font-weight: normal;
line-height: 18px;
}



.widget .signupForm {
    /* Box always has colour, pic always on right */
    background-color: #06d0d2;
    background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
    background-position: right bottom;
    background-repeat: no-repeat;

    /* height ensures full pic is shown  */
    height: 243px;    

    /* allow us to position contents */
    position: relative;
}

/* Absolutely position the form within the widget */
.widget .signupForm form {
 position: absolute;
 right: 160px;  
 bottom: 70px;
}

.widget .signupForm form input {
 display: block;
}


//* now just resize the widget box and move the form */

    .widget .signupForm {
        width: 300px; 
        height: 240px;
        background-size: 100%;    
    }

    .widget .signupForm form {
        right: 120px;   
        bottom: 50px;
    }
}

/* adjust slightly for larger sizes */
@media screen and (min-width: 980px) {
    .widget .signupForm {
        width: 343px; 
        height: 275px;
        background-size: 100%;    
    }

    .widget form .signupForm {
        right: 160px;   
        bottom: 70px;
    }
}​


/* ------------------------------------------------------------------------ Media Queries */

/* Smartphones */
@media (max-width: 480px) {

}

/* Tablet and Mobile */
@media (max-width: 979px) { 

}

/* Mobile to Tablet */
@media only screen and (max-width: 767px) {

}


/* Landscape Tablets */
@media (min-width: 768px) and (max-width: 979px) {

}

/* Desktop */
@media (min-width: 980px) {

}

Answer 1

您错误地接近了表单的定位。对于这样的小部件，您最好为小部件声明固定大小，然后使用绝对相对定位将表单定位在其中。然后您可以更改每个断点的框大小和表单位置。

这是一个 fiddle ，可以按照您的意愿进行操作，但方式更简洁。

** 更新 fiddle ** http://jsfiddle.net/andrewheins/9PrG2/5/

顺便说一句，你儿子真棒。