如何根据屏幕大小调整表单域的大小？

Question

当我缩短或加长浏览器 window 屏幕时，是否可以调整输入字段的大小？我将我的输入表单字段放在 div .chatbox 中，并需要它来缩短 window 大小的基数。请查看下面的示例，如果可能，请寻找简短的简单解决方案。

如有任何建议或示例，我们将不胜感激。谢谢炖菜

enter image description here

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css" href="/fonts">
    
   @font-face {
   font-family: vag;
   src: url(fonts/VAGRoundedStd-Light.otf);
       
}
body {
    background-color: #6B6B6B;
    background: url(http://wizzfree.com/pix/bg.jpg) fixed;
    background-size: 100% 100%;
    background-repeat: no-repeat;  
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
    overflow: hidden;
    margin: 0;
}
    /*............... chatbox ...............*/
    
    .chatbox {
    position: absolute;
    bottom: 50px;
    height: 42px;
    left: 50%;
    max-width: 600px;
    margin-left: -300px; /* half width */
    background-color: #2f2f2f;
    border-radius: 0px 30px 30px 0px;
}
    /*... input message ...*/
    
    input[type=text] {
    max-width: 300px;
    height: 40px;
    border: none;
    outline: none;
    padding-left: 37px;
    font-family: vag;
    color: white;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1.5px;
    background-color:transparent;
}
    /*......... crossfade on buttons .........*/

    .hover img{
    transition:.3s;
    position:absolute;
}
    .nohover{
    opacity:0;}
    a:hover .hover{
    opacity:0;
}
    a:hover .nohover{
    opacity:1;
}

<div class="chatbox" style="display:flex;margin-left:-150px;">
<!-- emojis list -->
<a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" height="42" style="margin-left:-32px;"><img src="http://wizzfree.com/pix/smiley2.png" height="42" class="nohover" style="margin-left:-32px;"><img src="http://wizzfree.com/pix/smiley.png" height="42" class="hover" style="margin-left:-32px;"></a>
<!-- input message -->
<form style="margin-left:-10px;"><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!-- typing on/off -->
<p style="margin-top:18px;color:#00fff6;font-family:vag;font-size: 16px;"><em><strong>Yummi is Typing</strong></em>...&nbsp;&nbsp;&nbsp;</p>
</div>

Answer 1

这会回答你的问题吗？

.chatbox {
  position:fixed;
  bottom:50px;
  left: 50%; /* center on x direction */
  transform:translateX(-50%);
  width:60vw;
  height:50px;
}

input {
  height:100%;
  width:100%;
  background:green;
}

<div class="chatbox">
  <input type="text"/>
</div>

Answer 2

当然可以。在 css 中使用“@media screen”属性每当屏幕 width/height 调整到特定大小时，您都可以根据它设置元素样式

@media screen (min-width > x) and (max-width < y) {
   input {
     width: <new-width>
   }

}

在 w3school

上了解它

如果你想更顺畅地调整输入大小，我下定决心使用框架。

如何根据屏幕大小调整表单域的大小？

How to resize form field based on screen size?

html

css

forms

field

window