Question

我在容器内有一个带标题的div和一些文本，该容器包含一个用作背景的img，其中div定位在图像的中间/左侧。我能够将所有内容排列在完整的显示屏上，但似乎无法使其具有响应性。现在，img可以很好地缩放，但是带有文本的div不能：文本框保留但文本溢出。该页面会以其他方式响应，并且我已经尝试了在限定曲目中尝试的所有内容。

尝试更改位置，溢出，宽度和高度等

HTML：

  <div class="welcome">
    <img src="pictures/hello.jpg" class="welcome-image">
    <div class="information">
        <h1>Welcome Message</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
           eiusmod tempor incididunt ut labore et dolore magna aliqua. 
           Eleifend quam adipiscing vitae proin sagittis. Magna fermentum 
           iaculis eu non diam id volus. </p>
    </div>
</div>

CSS：

.welcome{
   position: relative;
 }

.welcome-image{
   width: 100%;
   height: auto;
   position: relative;
}

.information{ 
   position: absolute;
   top: 35%;
   left: 20%;
   color: black;
   background-color: white;
   width: 50%;
   height: 55%;
   padding: 5% 5%;
   text-align: center;
}

.information h1{
   font-size: 50px;
   margin-top: 0;
}

.information p{
  text-align: justify;
  font-size: 18px;
}

Answer 1

您应用以下属性：

 max-width: 100%;

Answer 2

为了获得更好的响应体验，您可以根据不同的分辨率轻松更改css属性。

我建议您尝试以下这些代码；

/* For Mobile */
@media screen and (max-width: 540px) {
    .information h1 {
        font-size: 30px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .information h1 {
        font-size: 40px;
    }
}

为获得更好的体验，您可以轻松更改分辨率和不同分辨率的数量。

此外，如果要停止包装h1，则可以使用以下代码；

.information h1 {
   white-space: nowrap;
}

Answer 3

您应该从.information中删除position：absolute

Answer 4

Bootstrap建议的最佳断点。您可以根据需要设置字体大小。

@media only screen and (min-width : 320px) {
    .information h1 {
        font-size: 15px;
    }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    .information h1 {
        font-size: 25px;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .information h1 {
        font-size: 30px;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .information h1 {
        font-size: 50px;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .information h1 {
        font-size: 50px;
    }
}

使Div定位在图像响应式上？

4 个答案: