如何根据屏幕尺寸调整表单字段的大小？

问题描述

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

在这里，任何建议或示例都将不胜感激。 Thx耐嚼

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

解决方法

这能回答您的问题吗？

john

.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;
}

, 是的，当然可以。在CSS中使用'@media screen'属性只要屏幕的宽度/高度调整到特定大小，就可以根据其样式设置元素

import tweepy 
import pandas as pd


auth = tweepy.OAuthHandler(CONSUMER_KEY,CONSUMER_SECRET)
auth.set_access_token(ACCESS_TOKEN,ACCESS_TOKEN_SECRET)
api = tweepy.API(auth,wait_on_rate_limit=True)



tweets = tweepy.Cursor(api.user_timeline,id=username,since='2020-10-01',until='2020-10-02').items()


tweets_list = [[tweet.text,tweet.created_at,tweet.retweet_count,tweet.favorite_count] for tweet in tweets]
 
#save in a dataframe
tweets_df = pd.DataFrame(tweets_list,columns=['Tweet Text','Tweet Datetime','Retweets','Favorites'])
 
print(tweets_df)

在w3school上了解它

如果您想更平滑地调整输入的大小，我会下垂使用框架。

field forms html window