页面大小调整/显示与其他用户不同的问题

我有一个问题，我的注册页面没有显示所有的字段垂直，在窗口调整大小或如果有人的dpi是不同的我，除非窗口是完全完整的大小所有字段将挤在一起，并被我的图片隐藏。我尝试过引导大小属性以及其他关于如何保持调整大小的建议，但无论我做什么（这可能是我工作的位置），我都无法让我的注册表单或页面在不同的设备上动态调整大小，并且页面将无法正确调整大小，如果压缩。有人知道我该怎么解决这个问题吗？
因为stack还不允许我插入图片

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

      <!DOCTYPE html>
      <html>

      <head>
        <!-- meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
        <title>jumped over Login Page</title>
        <!--  FavIcon Insert -->
        <link rel="shortcut icon" type="image/jpg" href="images/codingCoverage.png" />
        <!-- Internal Resources -->
        <link rel="stylesheet" href="css/index.css">
      </head>

      <body class=l oginPage>
        <div class="container">
          <div class="left">
            <div class="header">
              <h2 class="animation a1"><img src="images/codingCoverage.png" alt="Coding Coverage Logo" width="200" height="175"></h2><br>
              <h2 class="animation a1"> The quick brown fox jumps over the lazy dog </h2>
              <h4 class="animation a2"><b>The quick brown fox jumps over the lazy dog</b></h4>
              <h4 class="animation a2"><b>The quick brown fox jumps over the lazy dog</b></h4>
              <h4 class="animation a2"><b>The quick brown fox jumps over the lazy dog</b></h4>
            </div>
            <div class="form">
              <!-- \/ begin post request for username and password \/ -->
              <form id="loginForm" action="login.do" method="GET">
                <input type="text" id="username" name="username" class="form-field animation a3" placeholder="Username">
                <input type="password" id="password" name="password" class="form-field animation a4" placeholder="Password">
              </form>
              <!-- /\ end post request for username and password /\ -->
              <p class="animation a5"><a href="#">Forgot Password</a></p>
              <!-- \/ This is the link that sends the post request for login \/ -->
              <button type="submit" name="submit" value="value" form="loginForm" class="animation a6">LOGIN</button>
              <!-- \/ This is the link that sends the post request for signUp \/ -->
              <form id="signUp" action="createAccountForm.do" method="get"></form>
              <button type="submit" name="submit" form="signUp" value="value" class="animation a7">SIGN UP</button>
              <!-- \/ Profile Page test Link \/ -->
            </div>
          </div>
        </div>
        <div class="right"></div>
      </body>

      </html>

.loginPage { box-sizing: border-box; }

@import url('https://fonts.googleapis.com/css?family=Rubik:400,500&display=swap');

.loginPage {
  font-family: 'Rubik', sans-serif;
  display: flex;
}

.loginPage .container {
  display: inline-flex;
  height: 90vh;
  flex: 1 1 auto;
  margin: 2rem;
}

.loginPage .left {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  animation-name: left;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 1s;
}

.loginPage .right {
  flex: 1 1 auto;
  height: 100vh;
  width: 80%;
  display: inline-flex;
  transition: 1s;
  background: center / cover no-repeat url(https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80);
}  

.loginPage .header > h2 {
  margin: 0;
  color: #6914e1;
}

.loginPage .header > h4 {
  margin-top: 10px;
  font-weight: normal;
  font-size: 15px;
  background: linear-gradient(to right, #6914e1 0%, #db4a6c 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.loginPage .form {
  max-width: 80%;
  display: flex;
  flex-direction: column;
}

.loginPage .form > p {
  text-align: left;
}

.loginPage .form > p > a {
  color: #6914e1;
  font-weight: bold;
  font-size: 14px;
}

.loginPage .form-field {
  font-size: 16px;
  height: 46px;
  padding: 0 16px;
  color: 000;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-family: 'Rubik', sans-serif;
  outline: 0;
  transition: 0.2s;
  margin-top: 20px;
}

::placeholder { 
  color: linear-gradient(to right, #6914e1 0%, #db4a6c 100%);;
}

.loginPage .form-field:focus {
  border-color: #6914e1;
}

.loginPage .form > button {
  padding: 12px 10px;
  border: 0;
  background: linear-gradient(to right, #6914e1 0%, #db4a6c 100%);
  border-radius: 3px;
  margin-top: 10px;
  color: #000;
  letter-spacing: 1px;
  font-family: 'Rubik', sans-serif;
}

.loginPage .animation {
  animation-name: move;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  animation-delay: 2s;
}

.loginPage .a1 {
  animation-delay: 2s;
}

.loginPage .a2 {
  animation-delay: 2.1s;
}

.loginPage .a3 {
  animation-delay: 2.2s;
}

.loginPage .a4 {
  animation-delay: 2.3s;
}

.loginPage .a5 {
  animation-delay: 2.4s;
}

.loginPage .a6 {
   animation-delay: 2.5s;
}

.loginPage .a7 {
   animation-delay: 2.6s;
}

 @keyframes move {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@keyframes left {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    padding: 5px 5px;
    width: 400px;
  }
}

页面大小调整/显示与其他用户不同的问题

暂无答案！

相关问题

热门标签

最新问答