如何让这个表单和按钮在响应式设计中正确调整大小?

Posted

技术标签:

【中文标题】如何让这个表单和按钮在响应式设计中正确调整大小?【英文标题】:How can I get this form and button to resize correctly in a responsive design? 【发布时间】:2012-05-25 09:01:16 【问题描述】:

我正在尝试创建一个自定义小部件,其中包括带有文本输入表单和按钮的背景图像。我使用的 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) 


【问题讨论】:

【参考方案1】:

在 bootstrap 的 css 中找到 @media (min-width: 768px) and (max-width: 979px) 或将其添加到您自己的。之后添加:form input max-width: 10px !important; 如果屏幕宽度低于 979 像素,它会将输入(所有输入!)的宽度设置为 10 像素;

它可以工作,但它可能会让你的网站在某个地方崩溃,所以我建议在表单的代码中添加一些类/ID,并将你现在内联的所有 CSS 移动到样式表中。它将允许不使用“!important”规则。

【讨论】:

感谢您的帮助,我实际上将其用作文本小部件。将它直接添加到小部件是否可以工作?这也是我正在使用的一个子主题(以防万一) 我不记得 Wordpress 是否允许您在文本小部件中使用 周围 感谢您的回复。我认为我的理解不正确。@media 行不会出现在文本小部件中。我是否只需将 【参考方案2】:

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

这是一个可以做你想做的事情的小提琴,但方式更简洁。

** 更新的小提琴 ** http://jsfiddle.net/andrewheins/9PrG2/5/

顺便说一句,你的儿子很棒。

【讨论】:

非常感谢您对我们儿子的好话。我真的很感激。 :) 感谢您的帮助,我正在学习(还有很多东西要学!)我还会将代码放入文本小部件中吗? 等一下,我在此过程中丢失了一些更改。是的,你仍然会做一个自定义小部件 好的,我已经更新了小提琴。再看一遍。我不会给你剪切和粘贴代码,但你应该能够知道我是如何在每个断点处移动框内的表单的。您可以更改小提琴中的代码以查看它的反应并了解它是如何工作的。该技术称为绝对相对定位,您可以在此处阅读更多信息:css-tricks.com/absolute-positioning-inside-relative-positioning 您似乎只声明了一次规则。请记住,您正在构建一个响应式站点,您必须为每个断点声明一组规则。您可以在小提琴中看到我更改了每个媒体查询的设置。对你来说也一样。您可能希望将规则直接放入 bootstrap-responsive.css。我假设您知道如何根据您的网站的宽度使用媒体查询。 alistapart.com/articles/responsive-web-design 您可以在文件底部看到所有媒体查询。您想在相关断点处添加规则。您可能希望在“SmartPhones”中声明您的第一组规则,在“Landscape Tablets”中添加您的下一组,在“Desktop”中添加最后一组

以上是关于如何让这个表单和按钮在响应式设计中正确调整大小?的主要内容,如果未能解决你的问题,请参考以下文章

响应式网页设计和调整图像大小

响应式设计:如何调整图像/背景图像的大小并垂直对齐 div?

如何让 Facebook Like Box 响应式?

如何让我的网站响应式?

Recharts 响应式容器在 flexbox 中无法正确调整大小

响应式设计 - 媒体查询在 iPhone 上不起作用?