我怎样才能让按钮调整窗口大小的响应？

是否有一种方法可以使按钮按照与输入类似的方式响应窗口大小调整大小 - 即按钮随着窗口的变化逐渐变小？

这是HTML：

<form action="send_form_email.php" method="GET" enctype="multipart/form-data" name="EmailTestForm"> 
<div class="form-group"> 
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
</div> 
<button type="submit" class="button"></button> 
</form> 
</body>

这是CSS：

form { 
position:relative; 
top:10px; 
margin-left: 25%; 
max-width:100%; 
} 

.form-control { 
    position: relative; 
    top: 65px; 
    left:0px; 
    padding: 16px; 
    width: 35vw; 
    height: 1.8vw; 
    font-size: 20px;  
} 

.button { 
    position: relative; 
    top: 0px; 
    left: 40vw; 
    border: 0; 
    background: url(http://i.imgur.com/9n3Zvcr.png) no-repeat; 
    width: 210px; 
    height: 75px; 
}

我已经试过了按钮的宽度设置为百分比，并使用最大宽度，都无济于事。我不确定是否可以使用媒体查询顺利重新调整按钮。

我三天前开始学习html，所以我真的不知道我在做什么。

来源

2014-11-01 Sarah Testori

此时也许你有兴趣的可以像引导学习 “有求必应” 的框架。只是一个建议。 – 2014-11-01 19:51:13

什么是“left：40vw;'？您可能想对[使用CSS的响应式设计]（http://learn.shayhowe.com/advanced-html-css/responsive-web-design/）和媒体查询进行一些研究。另外，我建议您使用实际的HTML布局来定位事物，而不是相对定位。 – jfriend00 2014-11-01 19:59:15

为什么使用'jquery'标签？根本没有Javascript代码**！ – 2014-11-01 20:27:31

尝试使用百分比而不是像素。

所以，如果你想让它反应灵敏，做这样的事情：

width:5%; //Will take 5% of the page 
width:50%; //Will take half of the page

使用百分比可能是困难的，但它是使按钮的最简单的方法大小的响应。

要了解更多关于CSS，Javascript代码，HTML5，PHP等等，请访问：http://www.w3schools.com/

来源

2014-11-01 20:04:31 DripDrop

这里有可能是一个很好的起点，你的解决方案：http://jsfiddle.net/bz60swhf/。

HTML：

<form> 
    <input type="email" placeholder="Enter email"> 
    <button type="submit"> 
     <img src = "http://i.imgur.com/9n3Zvcr.png" /> 
    </button> 
</form>

CSS：

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    box-sizing: border-box; 
} 

body { 
    padding: 10px; 
} 

form { 
    display: table; 
    width: 100%; 
    text-align: center; 
} 

form > input[type = "email"] { 
    outline: 1px solid gray; 
    font: normal 20px/2 Sans-Serif; 
    width: 70%; 
    display: inline-block; 
    vertical-align: middle; 
} 

button { 
    max-width: 30%; 
    height: 40px; 
    background: 0; 
    text-align: left; 
    vertical-align: middle; 
} 

button > img { 
    height: 100%; 
} 

@media screen and (max-width: 394px) { 
    button > img { 
     height: auto; 
     width: 100%; 
}

来源

2014-11-01 20:24:34 DRD

我怎样才能让按钮调整窗口大小的响应？

回答

相关问题