html - 如何基于响应式设计对齐div

Question

我有一些 HTML 和 CSS 代码，如下所示:

https://codepen.io/aspnetgal/pen/vaoNPz

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.adv-signup {position: relative; 
   background-image: linear-gradient( #fff, #eff1f1);
   
  width: 100%; height: 400px; }

	
.contents {position: absolute;  width: 1000px; 
 height: 200px; background-color:#2183c2;

}
.contents .bg{
 
  background: #ffffff url("https://s6.postimg.cc/ugw1p1pcx/sprite.png ") no-repeat left top;
   margin:0;
}
.text{
  
   font-family: "Ubuntu"; 
    font-weight: light;
    color:white;
 
     }

.text h3{
 font-weight: bold;
 }
.controls
{
  
}

 .btn
{
  background: #0c5382;
  color:white;
 
}
h3,h1{
    padding: 0px;
    margin: 0px !important;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .adv-signup {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .contents {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .contents {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .contents {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .contents {background: pink;}
}

<div class="adv-signup">
   
        <div class="contents">
          <div class="bg">
                <h1>test</h1>
              </div>
           <div class="text">
                   <h3>Sign up for E-News</h3>
                <p>Leave your email and we’ll send you regular updates on programs, events and news.</p>
            </div>

            <div class="controls">
                <input name="adv-sign-up-email-field" id="adv-sign-up-email-field" type="text" maxlength="255" value="Enter your email" />
                <a href="#" class="btn"> &gt;</a>
            </div>
        </div>
<div>

对于桌面，我希望包含文本(标题和段落)和控件的 div 内容以单行显示。

对于平板电脑，我希望包含文本(标题/段落垂直对齐)和控件的 div 内容显示在一行中。

我想在移动设备上将具有文本标题、段落和控件的 div 内容显示在一条垂直线上。

Answer 1

支持 Anji Response，您应该在媒体查询下编写所有 CSS。以下是您至少应遵循的查询列表。

最小宽度:320 像素(较小的手机视点)最小宽度:480px(小型设备和大多数手机)最小宽度:768px(大多数平板电脑)最小宽度:992px(较小的桌面视点)最小宽度:1200px(大型设备和宽屏幕)

注意:- 使用 JS 进行设置无论如何都是一项代价高昂的工作!!!