【发布时间】：2019-10-17 13:03:07
【问题描述】：
我正在尝试使用 create-react-app 构建注册/登录页面表单。
到目前为止，我开发了一个使用 css-grid 的网络布局。我在显示器上开发它，分辨率为 1920 x 1080。当我在较小分辨率的屏幕（1536 x 864）上打开相同的页面时，我发现它有点放大了，所以当我缩小到 80 时又可以了%.
When opened in 1920 x 1080 display
When opened in 1536 x 864 display
我尝试在 create-react-app 中更改 index.html 的视口，但没有更改。
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-react-app index.html 中可以使用元视口。
【问题讨论】：
-
添加完整的 html，渲染效果更好（即使使用小提琴也更好）。在我的经验中，大多数情况是因为元视口被遗忘或不正确，请仔细检查。其他时候问题是尺寸单位......但我不确定提供的信息。