输入框字体大小不起作用。无法找出原因

Question

下面是标记：

<input type="text" id="username" style="
    font-size: 2vw;
    font-family: inherit;
">

和CSS：

#username {
    font-size: 2vw;
}

问题是，这不起作用。我也尝试过更改字体系列，这也行不通。我已经检查了chrome中的开发人员工具，没有什么可以说它已被覆盖或其他内容。即使使用样式标签，它也不起作用。如何更改文本框的字体大小和字体系列？其他站点只是说要直接修改我尝试过和失败的属性。

编辑：当我在字段中单击时，字体和字体大小起作用。我希望他们一直工作，而不仅仅是单击内部时。没有附加的脚本，并且表单字段仅在Form元素内提交。

编辑：更完整的代码。除此以外，我不知道还能显示什么：

<form action="/index.php/component/users/?task=user.login&amp;Itemid=101" method="post" class="form-validate form-horizontal well">
                    <fieldset>


<div class="control-group">
            <div class="control-label">
            <label id="username-lbl" for="username" class="required" data-content="" data-original-title="" title="">
    Username<span class="star">&nbsp;*</span></label>
                    </div>
        <div class="controls">
        <input type="text" name="username" id="username" value="" class="validate-username required" size="25" required="required" aria-required="true" autofocus="" aria-invalid="false">
    </div>
</div>

<div class="control-group">
            <div class="control-label">
            <label id="password-lbl" for="password" class="required" data-content="" data-original-title="" title="">
    Password<span class="star">&nbsp;*</span></label>
                    </div>
        <div class="controls">
        <input type="password" name="password" id="password" value="" class="validate-password required" size="25" maxlength="99" required="required" aria-required="true" aria-invalid="false">    </div>
</div>

                                                                            <div class="control-group remember-group">
                                <div class="control-label">
                                    <label for="remember" data-content="" data-original-title="" title="">
                                        Remember me                                 </label>
                                </div>
                                <div class="controls">
                                    <input id="remember" type="checkbox" name="remember" class="inputbox" value="yes">

                                </div>
                                <div class="control-forgot">
                                    <a href="/index.php/component/users/reset?Itemid=101">
                                        Forgot Password?
                                    </a>
                                    <br>
                                    <a href="/index.php/component/users/remind?Itemid=101">
                                        Forgot Username?
                                    </a>
                                </div>
                            </div>
                                                <div class="control-group">
                            <div class="controls">
                                <button type="submit" class="btn btn-primary">
                                    Log in                              </button>
                            </div>
                        </div>
                                                <input type="hidden" name="return" value="aW5kZXgucGhwP29wdGlvbj1jb21fc3VydmV5JnZpZXc9c3VydmV5aG9tZXBhZ2U=">
                        <input type="hidden" name="d5e9d9bd205a03415af2ff178addfd6f" value="1">                 </fieldset>
                </form>

Answer 1

当我在笔中运行此代码时，将获得“ vw”单位的期望值：窗口宽度的2/100（iframe用于codepen）。我看不到您描述的焦点消失时的行为。检查您的字体大小是否不在这样的目标上：#username:focus {...}。

将vw用于字体大小可能是使较大的文本更具响应性的聪明方法。但是我喜欢在其上添加一个基本大小：calc(16px + 1vw)，它会根据任何特定设备的视口来调节其增长或收缩的速率。

但是，出于您的目的，使用“ vw”可能不是您想要的。我在这里推测，但是您试图使输入文本大于正文字体。最好先设置您的身体文字...

body {
  ...
  font-size: 16px; // this defines your "em" size
  ...
}

然后您可以将其用于调整其他尺寸...

h1 {
  font-size: 4em;
}

h2 {
  font-size: 2.5em;
}

#username {
  font-size: 2em;
}

要返回到原始主体大小而不与主体字体大小脱钩，请使用“ rem” ...

h1 span {
  font-size: 0.8rem;
}

此方法的优点是您可以更新一个地方，所有其他引用都将自动更新。

比您要求的更多的信息，但希望对您和其他人有帮助。