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

【问题标题】：How to resize form field based on screen size?如何根据屏幕大小调整表单域的大小？
【发布时间】：2020-10-04 17:51:28
【问题描述】：

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

任何建议或示例将在此不胜感激。谢谢炖

<!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>

【问题讨论】：

标签： html css forms window field

【解决方案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>

【讨论】：

vw = 相对于视口宽度的 1%
谢谢所有 abel，你能把你的解决方案放到我的代码中吗？

【解决方案2】：

当然可以。在 CSS 中使用“@media screen”属性每当屏幕宽度/高度调整到一定大小时，您可以根据它设置元素样式

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

}

在w3school阅读它

如果你想更顺畅地调整输入的大小，我会选择使用框架。

【讨论】：