Question

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

*{
    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内容以单行显示。

对于平板电脑，我希望具有文本（标题/ paragragh垂直对齐）和控件的div内容显示在一行中。

我希望将具有文本标题，段落和控件的div内容显示在手机上。

Answer 1

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

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

注意：-用JS设置反而是一个昂贵的工作！！！

Answer 2

更新了js小提琴。 https://codepen.io/anon/pen/BPXbjx

您需要添加以下代码。

.containerClass

我希望您能完成其余的样式。

如何根据响应设计调整div

2 个答案: