Javascript 使用智能手机键盘外观处理绝对布局

因此，我一直在尝试为mobile view实现一个登录页，您可以在这里看到： 到目前为止效果还不错

但一旦用户想要介绍他的用户名和密码，Android键盘就会出现，我的问题就会出现，如您所见：

我的元素（徽标和表单）通过绝对位置放置，以保持布局在适当的位置，无论屏幕大小如何。我怀疑这是我的主要问题

这里有一支非常快速的笔来展示问题的全部内容：（查看快速代码）

为了显示android键盘，您必须从chrome调试菜单中启用Toogle设备工具栏，然后单击选择设备并单击编辑

从那里，将打开一个列表并检查Nexus 5X。 此处描述了该过程： 要切换键盘，只需单击屏幕选项（更改方向）并选择纵向键盘

我认为这可能是原因中的代码：（你也可以在笔中看到相同的代码）

正如你所看到的，一切都是通过绝对的。随着键盘的出现，机身的尺寸急剧减小，从而导致形状向上移动，并将其置于徽标前面

我找不到一个合适的方法来应用这个布局，而不使用绝对来放置元素，同时使它在键盘降低主体尺寸时工作

---

非常感谢

我的建议是将CSS分为两个部分，一个在非常方形的纵横比下（比如1:1，你必须看看在什么纵横比下你得到了什么分辨率），并将徽标的

显示设置为
无
（当键盘可见时，这是非常常见的解决方案）

如果您不知道如何执行此操作，请参阅阅读关于
@media
查询

另一个选项（如果您不想使用@media query）是监听输入的
focus
和
blur
事件（focus表示选择了输入，blur表示不再选择输入），并使用javascript切换徽标

.logo
{
    position : absolute;
    z-index: 100;
    width: 80%;
    left: 10%;
    top: 7.5%;
}
.container__action
{
    position: absolute;
    z-index: 100;
    bottom: 5%;
    width: 80%;
    left : 10%;
    text-align: center;
}