Блог

Главная - Вопросы по программированию - Как изменить размер поля формы в зависимости от размера экрана?

Как изменить размер поля формы в зависимости от размера экрана?

#html #css #forms #window #field

#HTML #css #формы #окно #поле

Вопрос:

возможно ли изменить размер моего поля ввода, когда я сокращаю или удлиняю экран окна браузера? Я помещаю свое поле формы ввода в 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>...amp;nbsp;amp;nbsp;amp;nbsp;</p>
</div>

Ответ №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>

Комментарии:

1. vw = Относительно 1% ширины области просмотра

2. спасибо, Абель, ты можешь поместить свое решение в мой код?

Ответ №2:

да, конечно, вы можете. используйте свойство «@media screen» в css всякий раз, когда ширина / высота экрана изменяется до определенного размера, вы можете стилизовать свои элементы в соответствии с ним

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

}

читайте об этом на w3school

если вы хотите изменить размер ввода более плавно, мне нужно использовать фреймворк.