Я пытаюсь создать форму страницы регистрации / входа в систему с помощью create-реакции-приложения. До сих пор я разработал веб-макет, где я использовал css-grid. Я разработал его на дисплее с разрешением 1920 x 1080. Когда я открыл ту же страницу на экране с меньшим разрешением (1536 x 864), я обнаружил, что он немного увеличен, поэтому он снова становится нормальным, когда я уменьшаю до 80%.
При открытии дисплея 1920 x 1080 При открытии дисплея 1536 x 864
Я пытался изменить область просмотра index.html внутри create-react-app, однако оно не изменилось.
HTML:
<div className={classes.wrapper}>
<div className={classes.headerMessage}><h3>Welcome to the online-bartering system</h3></div>
<div className={classes.insideWrapper}>
<div className={classes.wrapperLeft}>
<form onSubmit={this.signInHandler}>
<h2 style={{ textAlign: 'center', color: "blue", display: "inline" }}>Sign In</h2> <img src={SignIn} />
<h6 style={{ textAlign: 'center' }}>Already registered ? Then enter username and password below: </h6>
<div className={classes.wrapperLeft_content}>
<label>
Username <input type="text" name="nameLogin" placeholder="username" onChange={this.handleChange} />
</label>
<div style={{ color: "red" }}>{this.state.nameLoginErr}</div>
<label>
Password <input type="password" name="passwordLogin" placeholder="password" onChange={this.handleChange} />
</label>
<div style={{ color: "red" }}>{this.state.passwordLoginErr}</div>
<button type="submit" id="signIn">Sign in</button>
</div>
</form>
</div>
<div className={classes.wrapperRight}>
<h2 style={{ textAlign: 'center', color: "red" }}>Sign Up</h2>
<h6 style={{ textAlign: 'center' }}>Not registered yet ? Then, please provide your user information below: </h6>
<div className={classes.wrapperRight_content}>
<form onSubmit={this.signUpHandler}>
<label>
Username* <input type="text" name="name" placeholder="username" value={this.state.name} onChange={this.handleChange} />
</label>
<div style={{ color: 'red' }}>{this.state.nameErr}</div>
<label>
Password* <input type="password" name="password" placeholder="password" value={this.state.password} onChange={this.handleChange} />
</label>
<div style={{ color: "red" }}>{this.state.passwordErr}</div>
<label>
Repeat Password* <input type="password" name="repeatPassword" placeholder="repeat password" value={this.state.repeatPassword} onChange={this.handleChange} />
</label>
<div style={{ color: "red" }}>{this.state.passwordErr}</div>
<label>
E-mail* <input type="text" name="email" placeholder="email" value={this.state.email} onChange={this.handleChange} />
</label>
<div style={{ color: "red" }}>{this.state.emailErr}</div>
<button type="submit" id="signUp">Sign Up</button>
</form>
</div>
</div>
</div>
<div className={classes.advertImages} >
<div>
<img src={ManImage} />
</div>
<div>
<img src={WatchImage} />
</div>
<div>
<img src={Cars} />
</div>
<div>
<img src={Smartphones} />
</div>
</div>
</div>
<div className={classes.footer}>
CSS:
html{
min-height: 100%;
}
body{
background-image: url('../images/background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: none;
scroll-behavior: unset;
overflow: hidden;
}
.wrapper{
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 100px 300px 600px ;
background: none;
margin: 80px 150px;
grid-row-gap: 1em;
justify-content: center;
align-content: start;
margin-top: 0 ;
}
.headerMessage{
background-color: rgb(147, 147, 199);
font-family: 'Arvo', serif;
font-size: capitalize;
text-align: center;
font-size: 2rem;
font-family: 'Titillium Web', sans-serif;
color: azure;
text-transform: uppercase;
opacity: 0.8;
border-radius: 50px 50px 0px 0px;
}
.headerMessage h3{
color: rgb(4, 17, 5);
opacity: 1;
}
.insideWrapper{
display: grid;
grid-template-columns: 5fr 5fr;
grid-column-gap: 1em;
max-height: 240px;
}
.wrapperLeft{
background-color: #97a1aa;
opacity: 0.8;
text-align: center;
border-radius: 0px 0px 0px 50px;
}
.wrapperLeft img{
margin-top: 5px;
display: inline;
float: right;
}
.wrapperLeft_content{
display: inline-block;
}
.wrapperLeft_content button {
width: 120px;
border-radius: 80px;
}
.wrapperLeft_content button:hover{
border: 2px white solid;
}
.wrapperRight{
background-color: #ecde1a;
opacity: 0.8;
max-height: 350px;
text-align: center;
border-radius: 0px 0px 50px 0px;
}
.wrapperRight_content{
display: inline-block;
}
.wrapperRight_content button {
width: 120px;
border-radius: 80px;
background-color: #b9b797;
opacity: 0.9;
}
.wrapperRight_content button:hover{
border: 2px white solid;
}
label {
display: flex;
flex-direction: row;
justify-content: flex-end;
text-align: right;
width: 400px;
line-height: 26px;
margin-bottom: 10px;
}
input {
height: 20px;
flex: 0 0 200px;
margin-left: 10px;
}
.advertImages{
display: grid;
grid-template-columns: 1fr 5fr 5fr 5fr;;
}
.advertImages img {
max-height: 300px;
}
.footer{
position:absolute;
bottom:0;
left:0;
width:100%;
background-color: black;
color: white;
max-height: 25%;
top:auto;
}
.footer h5 {
margin: 0px;
padding: 0px;
}
.footer img {
width: 0.4in;
height: 0.4in;
position:relative;
display: inline;
padding: 10px;
}
Я ожидаю, что веб-макет будет соответствовать разрешениям экрана, поскольку в индексе create-реагировать-приложение.html метапортпорт доступен.