不同分辨率下的文件有点乱

Question

我有div这样

 <div class="row ">
<div class="page-account-box ">
    <div class="col-lg-6 col-md-6 mx-auto ">
        <div class="account-box">
            <div class="picture_account">
                <img src="~/images/p1.jpg" class="imgFormat" style=" top: 60px; left: 60px;" />
            </div>

            <div class="account-box-content mt-3">                   
                <form method="post" class="form-account" asp-action="signup" id="signupForm">
                    <div class="row pt-3 ">
                        <div class="col-6">
                            <div class="form-account-label-input ">
                                <label>Firstname<span class="star-red">&nbsp;*</span></label>
                                <input asp-for="FirstName" type="text" class="w-100">
                                <span asp-validation-for="FirstName" class="text-danger star-red"></span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-account-label-input">
                                <label>Lastname<span class="star-red">&nbsp;*</span></label>
                                <input asp-for="LastName" type="text" class="w-100">
                                <span asp-validation-for="LastName" class="text-danger star-red"></span>
                            </div>
                        </div>
                    </div>

                    <div class="row pt-3 row-margin">
                        <div class="col-12">
                            <div class="form-account-label-input">
                                <label>Email</label>
                                <input asp-for="Email" type="text" class="w-100">
                            </div>
                        </div>
                    </div>
                    <div class="row pt-3 row-margin">
                        <div class="col-6">
                            <div class="form-account-label-input ">
                                <label>Password <span class="star-red">&nbsp;*</span></label>
                                <input asp-for="Password" type="password" class="w-100">
                                <span asp-validation-for="Password" class="text-danger star-red"></span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-account-label-input">
                                <label>Repeat Password <span class="star-red">&nbsp;*</span></label>
                                <input asp-for="ConfirmPassword" type="password" class="w-100">
                                <span asp-validation-for="ConfirmPassword" class="text-danger star-red"></span>
                            </div>
                        </div>
                    </div>

                   
                </form>
            </div>

        </div>
    </div>
</div>
</div>

这是Css

 .page-account-box {
  width: 100%;
  }

.page-account-box .account-box {
    width: 100%;
    height: auto;
    padding: 0;
    border: 1px solid #e2efef;
    -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
    box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
    position: relative;
    margin: 20px auto 30px;
    display: flex;
    background: #fff;
    border-radius: 20px;
}

    .page-account-box .account-box .picture_account {
        display: inline;
    }

    .page-account-box .account-box .account-box-content {
        min-height: 50%;
        padding: 15px 20px;
        border-radius: 20px;
        width: 100%;
    }
    
.page-account-box .account-box .picture_account .imgFormat {
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
box-shadow: 10px 10px 5px #ccc;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
position: relative;
background-color: darkgoldenrod;
}

.form-account {
  padding: 0px;
  margin: 0px;
  }

如果我在第三行制作，那么在 1280*1024 下就可以了，但在更高分辨率下就可以了

显示器在1920*1080的时候还挺好看的，换成1280*1024的时候就有点乱了。怎么让它在两种分辨率下都可以？

Answer 1

您应该 learn/explore CSS 内的媒体查询： https://drafts.csswg.org/mediaqueries/#width

有很多关于如何使用它的例子：

/* here generic css*/
@media (min-width: 1280px) { 
/* if width is at least 1280px, apply some change. Example: */
.page-account-box .account-box {
    width: 90%;
    height: auto;
 }
}

或者您可能需要：

@media (400px <= width <= 700px) {
/* adjust for mobile devices within these constraints */
...
}

不同分辨率下的文件有点乱

thins are a little messy in different resolution

css

model-view-controller

bootstrap-4